useInterval

window.setInterval을 편리하게 사용할 수 있는 커스텀 훅입니다.

2번째 인자 options는 number 혹은 { delay: SetIntervalParameters[1]; enabled?: boolean } 타입의 객체를 넘겨 줄 수 있습니다.

options가 number 타입이면 해당 값은 setInterval의 delay 값이 되며, 객체 타입일 경우 delay와 더불어 setInterval의 동작 여부를 결정하는 enabled 옵션을 추가로 다룰 수 있습니다.

• 💡 options가 number 타입의 경우 enabled는 기본적으로 true입니다.

interval을 직접 핸들링 할 수 있는 set, reset, clear 함수를 반환합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface IntervalOptions {
  delay: number;
  enabled?: boolean;
}

typescript

// 함수 오버로딩
function useInterval(
  callback: () => void,
  options: number
): {
  set: () => void;
  clear: () => void;
  reset: () => void;
};

function useInterval(
  callback: () => void,
  options: IntervalOptions
): {
  set: () => void;
  clear: () => void;
  reset: () => void;
};

Parameters

Name	Type	Description
callback	() => void	인터벌마다 실행될 콜백 함수
options	number | IntervalOptions	인터벌 지연 시간(밀리초) 또는 { delay: number; enabled?: boolean } 옵션 객체

Options

Name	Type	Default	Description
delay	number	-	인터벌 지연 시간(밀리초)
enabled	boolean	true	인터벌 자동 실행 여부

Returns

Name	Type	Description
set	() => void	인터벌을 시작하는 함수
clear	() => void	인터벌을 중지하는 함수
reset	() => void	인터벌을 초기화하고 재시작하는 함수

Usage

typescript

import { useInterval } from '@modern-kit/react';

const Example = () => {
  const [number, setNumber] = useState(0);

  const { set, clear, reset } = useInterval(
    () => setNumber(number + 1),
    { delay: 1000, enabled: false } // 자동 실행 X
  );

  /*
   * useInterval(() => {
   *   setNumber(number + 1);
   * }, 1000); // 자동 실행
   */

  return (
    <div>
      <p>{number}</p>
      <button onClick={set}>set</button>
      <button onClick={clear}>clear</button>
      <button onClick={reset}>reset</button>
    </div>
  );
};

Example

0