setInterval

setInterval() 함수는 주기적으로 인자를 실행하는 함수다.
clearInterval()함수를 이용하여 다음 작업 스케줄이 중지된다.

setTimeout

setTimeout 함수는 일정시간을 기다린 후에 실행되도록 하는 함수다.
setTimeout을 재귀로 사용한다면 setInterval과 마찬가지로 주기적으로 인자를 실행하도록 할 수 있다.

clearTimeout()을 이용하여 다음 작업 스케줄이 중지된다.

https://ko.javascript.info/settimeout-setinterval

useInterval

import { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef(); // 최근에 들어온 callback을 저장할 ref를 하나 만든다.

  useEffect(() => {
    savedCallback.current = callback; // callback이 바뀔 때마다 ref를 업데이트 해준다.
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current(); // tick이 실행되면 callback 함수를 실행시킨다.
    }
    if (delay !== null) { // 만약 delay가 null이 아니라면 
      let id = setInterval(tick, delay); // delay에 맞추어 interval을 새로 실행시킨다.
      return () => clearInterval(id); // unmount될 때 clearInterval을 해준다.
    }
  }, [delay]); // delay가 바뀔 때마다 새로 실행된다.
}

참고: https://mingule.tistory.com/65

useInterval 사용 이유: setInterval은 함수 실행시간을 delay시간에 포함시켜 delay시간을 보장하지 못하므로 타이머가 제대로 작동하지 않을 수 있다고 한다. useInterval은 ref를 이용하여 react의 라이프 사이클에 맞도록 한 interval이다.