[React / Typescript] setInterval, useRef 이용한 대기시간 제어하기

 

클라이언트에서 대기시간이 지나면,  화면이 전환되도록 작성한 코드다.

이 방법이 정답인지는 모르겠는데, 이런 저런 구글링은 그닥 도움이 되지 않았었다.

 

구글링 중 유용했던 내용은 다음과 같다.

1. useRef를 이용해서 dom에 간섭을 해야한다는 것.

2. useRef의 타입을 NodeJS.Timeout 으로 설정해주어야 한다는 것.

조사한 내용을 바탕으로 이렇게 하면 될 것 같아 작업했다.

  const timerRef = useRef<NodeJS.Timeout | undefined>();

  let initProcessingCount = 0;

  const initializingCount = () => {
    initProcessingCount = 0;
  };

  useEffect(() => {
    timerRef.current = setInterval(() => {
      if (!initProcessingCount) {
        initProcessingCount++;
      } else {
        initializingCount();
        navigator("/");
      }
    }, 5000); // 필요한 시간의 절반을 입력

    return () => clearTimeout(timerRef.current); // 컴포넌트가 언마운트될 때 interval을 클리어 함
  }, []);

  useEffect(() => {
    const clickHandler = () => { // 렌더링이 추가로 이루어질 일이 없어서 useCallback 사용안함
      if (!initProcessingCount) {
        return;
      } else {
        initializingCount();
      }
    };

    if (!match) return;
    else {
      document.addEventListener("click", clickHandler);
      document.addEventListener("keyup", clickHandler);
    }
    return () => { // 이벤트 핸들러 제거
      document.removeEventListener("click", clickHandler);
      document.removeEventListener("keyup", clickHandler);
    };
  }, [match]);

 

단순한 코드지만, 여러가지를 좀 더 깊게 이해해야 응용하기 좋을 것이다.

setInterval 이 완전 100% 정확한 타이밍은 아니라고 한다. 정확하려면, setTimeout을 재귀적으로 활용해야 가능하고 한다. (근본적인 이유는, JavaScript는 싱글스레드이기 때문이다.)
그러나, 그렇게까지 오차의 정확도를 필요로 하는 작업은 아니었기에 setInterval로 간단하게 처리했다.

결론 

task의 실행 간격을 일정하게 맞추고 싶다면 setTimeout()을 재귀적으로 구성하여 사용하자.

task의 push 간격을 일정하게 맞추고 싶다면 setInterval()을 사용하자.

 

모두모두 퍼다쓰삼

참고

setTimeout과 setInterval을 이용한 호출 스케줄링

아래 글은 정말 좋은 글이었다.

setInterval과 setTimeout

 

JavaScript - setInterval, setTimeout 사용법