동적인 인자를 받는 Interval

문제

간단한 타이머를 만들어야 한다.
그러나 그 시간 정보는 api로 받아 오기 때문에 단순히 1초씩 올리면 안된다.
타이머가 실행 중인지, 일시정지 상태인지 등을 api를 거쳐서 업데이트가 되는데,
이를 계속 반영해줘야 한다.
즉, 동적인 인자를 계속 고려해야 했다.

내장된 setInterval을 이용한 코드

일단은 setInterval 을 사용해 보았다.

const interval = useRef();

useEffect(()=>{
  interval.current = setInterval(function() {
    if(!Pause && Studying) {
      setElapsedTime(ElapsedTime => ElapsedTime+1)
    }
  }, 1000)
    return () => {
      clearInterval(interval.current)
    }
},[])

문제는 처음 useEffect가 실행되고는 Pause나 Studying의 state가 자동으로 되지 않는다.
그래서 이 방법으로는 단순히 시간을 올리는 것 외에는 아무것도 할 수 없었다.

해결

원문
번역
구글링으로 아주 간단하게 문제를 해결 할 수 있는 방법을 찾았다.
바로 커스텀 훅을 만드는 것이다.

커스텀 훅

function 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]);
}

커스텀 훅을 이용한 코드

useInterval(() => {
  setElapsedTime(ElapsedTime+1);
}, (Studying && !Pause) ? 1000 : null);

이렇게 하면 인자를 동적으로 활용할 수 있다. 끝.