[React] 일정 시간마다 동작시키는 Interval 리액트 구현

JavaScript에는 주기적으로 인자를 실행시키는 Interval이라는 함수가 존재한다.

하지만 React에서 이 함수를 실행 할 경우  동작이 되지 않기때문에 따로 Custom useInterval 을 제작하여 사용해야된다.

 

useInterval 함수를 생성한다,

 

function useInterval(callback: any, delay: any) {
  const savedCallback = useRef<any>();
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

위에 코드를 작성하여 일정시간마다 실행되는 useInterval 리액트 훅을 생성 후 아래와 같이 사용한다.

 

 

useInterval(() => {
    console.log("실행");
  }, 60000);

사용하는 함수에 위와 같이 넣을 시 console.log("실행") 이 정해진 시간(60000) 마다 실행된다.

시간은 1000 이 1초이다.