[React] 리액트 이해하고 사용하기 (2) useState() 이용해서 리렌더링 하기

 

 

const root = document.getElementById("root");
let count = 0;
function countUp() {
	count += 1;
};
const Container = () => (
	<div>
		<h3>클릭수 : {count}</h3>
		<button onclick={countUp}>클릭</button>
	</div>
);
ReactDOM.render(<Container />, root);

JSX를 이용해서 간편하게 HTML를 render해줬다.

인제 우리가 원하는 것은 버튼을 클릭하면 클릭수가 0에서 클릭한 수만큼 바뀌는 것이다.

버튼을 클릭하면 countUp이라는 함수가 동작하고 함수로 인해 count는 1씩 증가할 것이다.

그렇지만 실제로는 UI에서는 아무런 일도 일어나지 않는다❗️

 

왜그럴까?

바로 리렌더링이 되지 않기 때문이다.

 

코드가 동작하는 것을 보면 리렌더링 즉 새로고침이 되지 않는 것이다.

그렇다고 countUp에 ReactDOM.render를 또 넣어주기엔 비효율적이다.

 

그래서 나온게 useState다.

useState를 이용하면 상태값이 바뀜에 따라 리렌더링을 해준다.

 

const test = React.useState(0);
console.log(test)

우선 useState()의 인자값을 확인해보면 배열로 나온다.

첫번째 인자값은 상태값이고 두번째는 상태값 갱신 함수다.

배열이기 때문에 매번 test[0] 이렇게 쓰는 것보다 새로운 문법을 사용하는게 좋다.

 

// 기존방식
const num = [1, 2]
const first = num[0];
const second = num[1];

// 뉴방식
const [first, second] = num;

코드상으로 둘은 같지만 사용하는데 뉴방식이 더 편하다.

이 새로운 문법을 사용해서 useState()를 사용해준다고 하면

 

    const root = document.getElementById("root");
    const Container = () => {
        const [counter, modifier] = React.useState(0);
        const onClick = () => {
            modifier(counter + 1);
        }
        return (
            <div>
            <h3>클릭수 : {counter}</h3>
            <button onClick={onClick}>클릭</button>
            </div>
        )
    };
    ReactDOM.render(<Container />, root);

이렇게 만들어줄 수 있다!

useState의 첫번째 인자인 상태값을 counter라는 변수에 넣어주고 상태값을 변경해주는 함수는 modifier라고 해줬다.

button을 누를때마다 onClick이라는 함수를 실행시켜 counter를 1씩 증가시키고 리렌더링하게 구현했다.