useTimer

Introduce

지정된 시간이 지난 후 콜백 함수를 실행하는 타이머 훅입니다. 타이머를 시작하거나 취소할 수 있습니다.

interface UseTimerReturns {
  start: () => void;
  cancel: () => void;
}
 
const useTimer = (callback: () => void, ms: number): UseTimerReturns

Props

callback : 타이머가 완료된 후 실행할 함수
ms : 타이머가 작동할 지연 시간 (밀리초)

Returns

start : 타이머를 시작하는 함수
cancel : 현재 활성화된 타이머를 취소하는 함수

Examples

TestComponent.tsx

import React, { useState } from 'react';
import useTimer from './useTimer';
 
const TestComponent = () => {
  const [count, setCount] = useState(0);
  const { start, cancel } = useTimer(() => setCount((prev) => prev + 1), 2000);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={start}>Start Timer</button>
      <button onClick={cancel}>Cancel Timer</button>
    </div>
  );
};

타이머가 시작되면 지정된 시간(ms)이 지난 후에 콜백 함수가 실행됩니다.

⚠️

타이머가 활성화된 상태에서 다시 시작(start)하면 기존 타이머는 취소되고 새로운 타이머가 시작됩니다.

useSound useToggle