useState 동작 방식

useState 에서 setState 는 비동기 동작 방식을 가지고 있다.

비동기로 동작하는 이유

하나의 페이지나 컴포넌트 내에서 수많은 상태값이 존재한다. 이를 하나 하나 바뀔 때마다 화면을 리렌더링한다면 성능 저하가 발생할 것이다. 그렇기 때문에 리액트는 성능 향상을 위해 한 번에 렌더링을 하는 방법을 채택하였다.

또한, setState를 연속 호출해도 배치(batch) 처리하여 한 번에 렌더링하도록 하여 아무리 많은 setState 가 연속적으로 사용되었어도 batch 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지한다.

 

하지만, 가끔 우리는 동기적으로 렌더링 시점을 잡아 무언가를 하고 싶은 경우가 있다. 아래 그에 대한 방법을 제시한다.

 

1. useEffect 를 사용해서 mount 시점을 잡아서 렌더링한다.

useEffect(() => {
	// 작업
}, [state]);

2. setState 에 인자를 콜백함수로 넣는 방법

const [addNumber, setAddNumber] = useState(0)

setAddNumber((num) => (num + 1))