packagesreacthooksuseTimer

useTimer

카운트다운 타이머 기능을 구현하는 Hook입니다. 타이머를 시작, 일시정지, 초기화할 수 있으며 감소하는 시간을 표시할 때 사용합니다.

Props

이름타입설명기본값
expireTimenumber만료 시간0
onStart() => void타이머 시작 시 호출되는 콜백noop
onReset() => void타이머 초기화 시 호출되는 콜백noop
onPause() => void타이머 일시정지 시 호출되는 콜백noop
onExpire() => void타이머 만료 시 호출되는 콜백noop
syncTimebooleanexpireTime 변경 시 시간 동기화 여부false
autoStartboolean타이머 자동 시작 여부false
intervalnumber타이머 갱신 간격 (밀리초)1000
decrementValuenumber매 간격마다 감소할 값1

Return

  • isRunning: 타이머 실행 상태
  • time: 현재 시간
  • start: 타이머 시작 함수
  • reset: 타이머 초기화 함수
  • pause: 타이머 일시정지 함수

Usage

import { useTimer } from '@teamsparta/react';
 
function Example() {
  const { time, isRunning, start, reset, pause } = useTimer({
    expireTime: 60,
    onStart: () => console.log('타이머 시작'),
    onReset: () => console.log('타이머 초기화'),
    onPause: () => console.log('타이머 일시정지'),
    onExpire: () => console.log('타이머 만료'),
  });
 
  return (
    <div>
      <div>남은 시간: {time}초</div>
      <div>상태: {isRunning ? '실행 중' : '정지'}</div>
      <button onClick={start}>시작</button>
      <button onClick={pause}>일시정지</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

Example

퀴즈 타이머

function QuizTimer() {
  const { time, isRunning, start, reset } = useTimer({
    expireTime: 30,
    autoStart: true,
    onExpire: () => {
      alert('시간이 종료되었습니다!');
    },
  });
 
  return (
    <div>
      <div>남은 시간: {time}초</div>
      <div
        className="progress-bar"
        style={{ width: `${(time / 30) * 100}%` }}
      />
    </div>
  );
}

인터벌 타이머

function IntervalTimer() {
  const { time, isRunning, start, reset, pause } = useTimer({
    expireTime: 60,
    interval: 2000, // 2초마다
    decrementValue: 2, // 2씩 감소
    onExpire: () => {
      console.log('타이머 완료');
    },
  });
 
  return (
    <div>
      <div>남은 시간: {time}초</div>
      <button onClick={start}>시작</button>
      <button onClick={pause}>일시정지</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

동기화된 타이머

function SyncedTimer() {
  const [maxTime, setMaxTime] = useState(60);
 
  const { time, start, reset } = useTimer({
    expireTime: maxTime,
    syncTime: true, // maxTime이 변경되면 time도 동기화
  });
 
  return (
    <div>
      <input
        type="number"
        value={maxTime}
        onChange={(e) => setMaxTime(Number(e.target.value))}
      />
      <div>남은 시간: {time}초</div>
      <button onClick={start}>시작</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}

주의사항

  • expireTime은 초기 타이머 값을 설정합니다.
  • syncTime이 true일 때는 expireTime 변경 시 현재 시간이 동기화됩니다.
  • interval과 decrementValue를 조절하여 타이머의 동작을 커스터마이즈할 수 있습니다.
  • 컴포넌트가 언마운트되면 자동으로 타이머가 정리됩니다.
  • autoStart가 true이면 마운트 시 자동으로 타이머가 시작됩니다.
useThrottletypes