Skip to main content

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;
};

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>
  );
};

0