[React] useState의 비동기성 (state를 남발하지 말자!)

오늘은 동기, 비동기 때문에 고생을 좀 했습니다..

useState는 성능때문에 다른 state를 기다렸다가 한꺼번에 render 한다고 합니다. 그래서 이를 간과하고 useState를 남발해서 코드를 짜면 돌이키기 힘든 문제가 발생합니다. 나는 분명 순서대로 잘 짠 것 같은데 생각처럼 동작하지 않는 경험을 할 수 있기에 state는 해당 컴포넌트에서 중요한 변경사항이 있는 값에 사용하도록 합시다.

 

제가 고생한 예시를 보겠습니다.

다음의 결과가 어떻게 나올까요?

// 중간 발췌

const [a, setA] = useState(null);
	const [b, setB] = useState(null);

	useEffect(() => {
		setA('a');
		console.log(a, b);
		setB('b');
		console.log(a, b);
	});

 

a, null

a, b  

위처럼 나올것 같지만 사실은

 

null, null

null, null

a, b

a, b

로 찍히게 됩니다.

처음에 렌더링이 되면서 state를 업데이트 할 것을 기다리고 다시 rerender 되면서 콘솔에 찍히게 되는 것입니다.

아직도 state를 여러개 쓰면 엄청 헷갈릴것 같습니다..

 

아무튼 정리해보면!

 

1. 중요한 변경사항에 state를 사용하자

2. state를 남발하지 말자

3. setState를 한다고 값이 바로 변경되지 않음을 인지하자

4. reRender에 대해 잘 생각해보자