React useEffect + setInterval 사용

리듬게임을 프로젝트를 하는중...노트 스폰 딜레이를 설정하기 위해서 setInterval 콜백 함수를 사용해야하는 일이 생겼다. 그래서 useEffect에 setInterval을 넣고 함수를 돌리는데...state값 반영이 안되는 것이다!

 

일단 우리가 원래 사용하는 코드를 살펴보자.

export default function App(){
    const[count, setCount] = useState(0)

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

여기서 사용하는 useEffect는 첫 렌더링에만 변경사항이 적용되는 로직이다. 그렇기 때문에 우리가 아무리 인터벌을 돌려도 count는 변경이 되지 않는다.

 

그렇다고 useEffect 외부에 함수를 작성하자니..렌더링을 할때마다 해당 함수를 계속 실행하기 때문에 내가 원하는 방향성과는 다르다.

 

이럴때는 리엑트 커스텀 함수인 useInterval을 사용하면 된다. useInterval은 동적 호출 스케줄링 함수이다. 해당 함수로 우리가 직면하고 있는 문제를 해결할 수 있다.

 

const useInterval = (callback, delay) => {
    const savedCallback = useRef();
  
    // Remember the latest callback.
    useEffect(() => {
      savedCallback.current = callback;
    }, [callback]);
  
    // Set up the interval.
    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }

export default function App(){
    const[count, setCount] = useState(0)

	useInterval(() => {
        setCount(count + 1);
        console.log(noteCount)
    }, 1000)
}