[React] 리액트에서 setTimeout 더 편하게 쓰기

React에서 setTimeout 같은 타이머 API를 사용할 때 컴포넌트의 생명주기를 고려하지 않으면 메모리 누수나 예기치 않은 예외가 발생할 수 있다. 예를 들어 타이머를 설정한 후 컴포넌트가 언마운트돼도 타이머는 여전히 실행되고, 이후 타이머 콜백에서 언마운트된 컴포넌트의 상태를 업데이트하려고 하면 에러가 발생할 수 있다.

 

위 같은 상황을 방지하기 위해 useEffect의 클린업 함수에 타이머 해제 로직을 추가한다. 하지만 한 컴포넌트에서 여러 타이머를 관리해야 한다면 메모리 누수 뿐만 아니라 타이머를 관리하기 위한 로직 때문에 컴포넌트의 복잡성이 높아질 수 있다.

 

만약 별도의 커스텀 훅에서 타이머를 관리하고, 커스텀 훅이 언마운트 될 때 모든 타이머를 자동으로 해제한다면 해당 훅을 사용하는 곳에선 타이머 설정과 타이머 수동 해제에만 신경 쓰면 된다. 즉, 타이머 설정/해제 로직을 훅 내부에 캡슐화함으로써 컴포넌트 자체는 타이머의 세부 구현보다 비즈니스 로직에 더 집중할 수 있게 된다.

 

useTimeouts.ts 훅 정의 ▼

type TimerID = NodeJS.Timeout;

export default function useTimeouts() {
  const timerIDs = useRef<Set<TimerID>>(new Set());

  const setTimer = (callback: () => void, delay: number) => {
    const id = setTimeout(callback, delay);
    timerIDs.current.add(id);
    return id;
  };

  const clearTimer = (id: TimerID) => {
    clearTimeout(id);
    timerIDs.current.delete(id);
  };

  const clearAllTimers = () => {
    timerIDs.current.forEach(clearTimeout);
    timerIDs.current.clear();
  };

  useEffect(() => {
    // 훅을 호출한 컴포넌트 컴포넌트 언마운트시 등록한 모든 타이머 ID 해제
    return () => clearAllTimers();
  }, []);

  return { setTimer, clearTimer, clearAllTimers };
}

 

useTimeouts 사용 예시 ▼

const { setTimer, clearTimer, clearAllTimers } = useTimeouts();

const timerID = setTimer(() => { /* ... */ }, 500); // 타이머 설정
clearTimer(timerID); // 타이머 수동 해제
clearAllTimers(); // 모든 타이머 수동 해제

 

💡 React 훅은 각 컴포넌트 인스턴스마다 독립적인 상태 공간을 갖는다. 때문에 A 컴포넌트와 B 컴포넌트에서 useTimeouts를 사용하더라도 훅 내부에 있는 상태는 독립적이다.