리액트 setTimeout 안 함수에서의 state 값

리액트 네이티브로 두번째 어플을 개발중인데

setTimeout 을 사용하여서 기능 개발중인 것이 있다. 근데 개발을 하던 중 모르던 사실을 발견하여 기록한다.

 

리액트에서 setTimeout 내에서의 state는 setTimeout을 정의할때의 state값을 계속해서 사용한다.

예를들어,

 

const [count, setCount] = useState(0);
  useEffect(() => {
    setInterval(() => {
      console.log(count);
      setCount((prev) => prev + 1);
    }, 1000);
  }, []);

이렇게 하면

0
1
2
3
4
...

이렇게 찍힐 것 같지만 실제로는

0
0
0
0
0
...

이렇게 찍힌다. 그렇다고 count 값이 계속해서 0은 아니다. setCount 함수는 정상동작하여 count는 실제로 위와 같은 값을 갖는다.

위와 같이 동작하게 하고 싶으면 useRef 훅을 사용하면 해결이 된다. 

 

const [count, setCount] = useState(0);
const countRef = useRef(0);

  useEffect(() => {
    setInterval(() => {
      console.log(count.current);
      setCount((prev) => prev + 1);
    }, 1000);
  }, []);
  
  useEffect(()=>{
    countRef.current = count;
  },[count])

나 같은 경우는 이런식으로 사용하여 해결하였다.