setInterval

setInterval : 매 시간 동안 브라우저와 통신하는 함수

syntax

setInterval(()=>{
	//실행할 코드
}, 시간 간격)

React에서 setInterval를 사용할 때 주의해야 하는 점은 함수 컴포넌트가 매 렌더링마다 새롭게 실행된다는 점이다. 이는 setInterval이 설정한 타이머가 계속해서 새롭게 설정될 수 있으며, 이전 타이머를 제거하지 않으면 여러 타이머가 동시에 실행되는 문제가 발생할 수 있다.

useInterval

useInterval은 이러한 문제를 해결하기 위한 사용자 정의 Hook이다. 이 Hook을 사용하면 주어진 함수를 일정한 간격으로 반복 실행하게 할 수 있다. 이 Hook은 주어진 함수를 일정한 간격으로 반복 실행하게 해준다. setInterval을 쉽게 사용하게 만들어 주는 useInterval의 예시를 다음과 같이 들 수 있다.

import { useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

이 useInterval Hook은 두 개의 useEffect를 사용한다.

첫 번째 useEffect는 주어진 콜백을 ref에 저장한다. useRef는 이 Hook이 여러 렌더링 사이에도 값을 유지하는 데 사용된다.

두 번째 useEffect는 실제로 setInterval을 설정하고, 컴포넌트가 언마운트될 때 이 타이머를 제거하는 역할을 한다. useEffect의 클린업 함수에서 clearInterval을 호출하여 타이머를 제거한다.

ex) Counter.js

import React, { useState } from 'react';
import useInterval from './useInterval'; // useInterval Hook을 가져옵니다.

function Counter() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1); // 매초마다 카운터를 1 씩 증가시킨다.
  }, 1000);

  return <h1>{count}</h1>;
}

export default Counter;

useInterval Hook 내부에서 이미 clearInterval을 사용하여 타이머를 정리(cleanup)하는 코드가 있기 때문에, 이 Hook을 사용하는 컴포넌트에서는 따로 클린업 함수를 설정할 필요가 없다.

useInterval Hook을 사용하게 되면 각 컴포넌트에서 타이머의 설정과 정리를 따로 처리하지 않아도 되므로, 코드의 중복을 줄이고 가독성을 향상시킬 수 있다.