[React] SetInterval 을 대신할 UseInterval

 
기존 웹 프로젝트를 고치면서 UseEffect내에 사용하는 기존 SetTimeout 과 SetInterval 을 이요하는 호출 프로세스는 지속적으로 켜놓는 웹프로젝트에 언제 잘못될지 모르는 시간폭탄 같았다.
어느순간 꼬이기 시작하면 Client 브라우저가 꺼져버리는 현상이 발생하고 브라우저가 꺼지면 Dev Tool에서 보던 데이터도 날아가서 너무 힘들었다.
그렇다고 이 모든걸 파일로 로깅하면 데이터의 양이 너무 방대하고...

 

 

아무튼 구글링을 해보니 커스텀 훅을 누군가 올려놨다.

 

참고링크

https://usehooks-ts.com/react-hook/use-interval

 

 

UseInterval 뿐 아니라 굉장히 좋은 훅들이 많이 있으니 하나씩 둘러볼 예정.

 

 

우선 UseInterval을 사용하기 위해서 파일을 하나 생성한다.

 

 

 

 

 

useInterval.js

 

import { useEffect, useRef } from "react";

const 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]);

};

export default useInterval;

 

 

 JS 파일을 하나 생성 후 사용할 곳에서 import 하여 사용한다.

 

import useInterval from "./useInterval";

 

 

  useInterval(() => {

   

    //이곳에 사용할 함수를 넣는다.

 

  }, 1000); <-- interval 계수는 밀리세컨드

 

 

 

딜레이값을 동적으로 할당하여 인터벌을 조절해주니 훌륭하다.