🤔 useState 최신화가 안된다? (Closure, Scope)

React 개발을 하다보면 useState 기능을 아주 많이 사용하는데요, 예를 들어서 간단한 카운터 컴포넌트를 만들었습니다.

예시

const Counter = () => {
	const [count, setCount] = useState(0);
  
  	const incrementNumber = () => {
		setCount(count + 1);
		console.log(count);
	};

	return (
		<button onClick={incrementNumber}>
			{count}
		</button>
  	);
}

카운터를 찍어보면...

? 🤔

그런데 이상하죠? 콘솔과 디스플레이가 차이나는 상황이 발생합니다.
이 문제를 Closure와 Scope 라고 합니다.

Closure는 함수가 선언된 렉시컬 환경을 기억하여 함수가 렉시컬 환경 밖에서 실행될 때에도 이 환경에 접근할 수 있게 하는 기능입니다. 즉, 함수는 자신이 선언된 범위 밖의 변수를 참조할 수 있습니다.

• 함수가 실행될 때, 렉시컬 환경은 스택에 저장됩니다.
• 함수가 렉시컬 환경 밖에서 실행될 때에도 스택에 저장된 렉시컬 환경에 접근할 수 있습니다.

Scope는 프로그램에서 변수, 함수, 상수 등의 식별자가 유효한 범위를 의미합니다. 즉, 어디에서 어떤 식별자를 사용할 수 있는지를 결정합니다.

원인

위의 상황의 예시로 들자면

• 렌더 측은 최신 count 값을 반영하지만 incrementNumber() 함수는 초기 값을 사용합니다.
• 비동기 처리로 인해 incrementNumber() 함수 내에서 count 값 업데이트가 렌더링 이후에 발생합니다.

const incrementNumber = () => {
	setCount(count + 1); // 0 -> 1 증가
	console.log(count); // 0 출력
};

해결?

이런 상황을 해결하기 위해서는 다양한 방법이 있는데요. 그 중 몇 가지를 제안합니다.

1. setState 이전값 참조하기

setCount((prev) => {
	const newCount = prev + 1;
	console.log(newCount);
	return newCount;
});

setState 콜백함수 내의 arg로 이전 값을 반환하기 때문에, 원하는 기능을 넣어버리면 해결될 것 입니다. 제가 자주 사용하는 방법이기도 하구요.

2. useEffect에서 감지하기

  useEffect(() => {
    if (count === 10) console.log('10 입니다.');
  }, [count]);

또는 useEffect를 활용하여 dependency array에 감지할 변수를 넣습니다.

3. let, useRef 사용하기

let count2 =0;
const countRef = useRef(0);

return (
    <>
      <button
        onClick={() => {
          count2 += 1;
          console.log(`let ${count2}`);
        }}
      >
        let {count2}
      </button>
      <button
        onClick={() => {
          countRef.current += 1;
          console.log(`ref ${countRef.current}`);
        }}
      >
        useRef {countRef.current}
      </button>
    </>
  );

주의할 점은 let과 useRef는 값 변화에 따라 렌더링 트리거하지 않아 화면에는 0만 보이게 될 것 입니다.

디스플레이 용으로는 적합하지 않군요. 하지만 함수 내 상태 감지로는 적절할 지 모르겠습니다.

결론

정답은 없는것 같습니다. 최적화 등을 고려하여 적절한 곳에 사용하면 좋겠네요.