setInterval 시 상태 값 변경 불가 관한 문제

1) 문제 정의

첫 렌더링 때 한번만 카운트업 되고 그 이후 상태 값이 카운트업 되지 않는 이슈 발생

2) 원인 추론

setState 실행 시 state가 변경되고, 화면에서 사용하는 state가 변경됨에 따라 컴포넌트에서 리랜더링이 발생한다.
따라서 setState가 한 번 실행되고 나면 state가 초기화되어 해당 값이 카운트업 되지 않는다.

3) 해결 방안

useRef를 이용해서 상태를 기억하고, useRef의 current 값을 이용해 계속 증가된 값을 적용한다.

const useInterval = (callback:() => void, delay:number) => {
  const savedCallback = useRef<any>();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    let id = setInterval(() => {
      savedCallback.current();
    }, delay);
    return () => clearInterval(id);
  }, [delay]);
}
export default useInterval;

리랜더링 시 함수 재호출이 발생하지 않도록 수정 후 만들어뒀던 useInterval hook 적용

const [counter, setCounter] = useState(0);

useInterval(() => {
    if(counter < 99) setCounter(counter + 1);
}, 200);

4) 결과

컴포넌트 내 함수는 재호출하지 않으면서 카운트업 로직은 동작한다.