useStopwatch

스탑워치 기능을 구현하는 Hook입니다. 타이머를 시작, 일시정지, 초기화할 수 있으며 증가하는 시간을 표시할 때 사용합니다.

Props

이름	타입	설명	기본값
initialTime	`number`	초기 시간	`0`
onStart	`() => void`	타이머 시작 시 호출되는 콜백 함수	-
onStop	`() => void`	타이머 초기화 시 호출되는 콜백 함수	-
onPause	`() => void`	타이머 일시정지 시 호출되는 콜백 함수	-
onTick	`(time: number) => void`	매 초마다 호출되는 콜백 함수	-
syncTime	`boolean`	initialTime 변경 시 시간 동기화 여부	`false`
autoStart	`boolean`	자동 시작 여부	`false`

Return

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

Usage

import { useStopwatch } from '@teamsparta/react';
 
function Example() {
  const { time, isRunning, start, stop, pause } = useStopwatch({
    initialTime: 0,
    onStart: () => console.log('타이머 시작'),
    onStop: () => console.log('타이머 초기화'),
    onPause: () => console.log('타이머 일시정지'),
    onTick: (currentTime) => console.log(`현재 시간: ${currentTime}초`),
  });
 
  return (
    <div>
      <div>시간: {time}초</div>
      <div>상태: {isRunning ? '실행 중' : '정지'}</div>
      <button onClick={start}>시작</button>
      <button onClick={pause}>일시정지</button>
      <button onClick={stop}>초기화</button>
    </div>
  );
}

Example

진행률 표시 타이머

function ProgressTimer() {
  const [progress, setProgress] = useState(0);
  const targetTime = 60; // 1분
 
  const { time, isRunning, start, stop, pause } = useStopwatch({
    onTick: (currentTime) => {
      setProgress((currentTime / targetTime) * 100);
    },
  });
 
  return (
    <div className="progress-timer">
      <div className="progress-bar" style={{ width: `${progress}%` }} />
      <div className="time-display">
        {time}초 / {targetTime}초
      </div>
      <div className="controls">
        {!isRunning ? (
          <button onClick={start}>시작</button>
        ) : (
          <button onClick={pause}>일시정지</button>
        )}
        <button onClick={stop}>초기화</button>
      </div>
    </div>
  );
}

구간 기록 타이머

function LapTimer() {
  const [laps, setLaps] = useState<number[]>([]);
 
  const { time, start, stop } = useStopwatch({
    onTick: (currentTime) => {
      // 10초마다 구간 기록
      if (currentTime > 0 && currentTime % 10 === 0) {
        setLaps((prev) => [...prev, currentTime]);
      }
    },
  });
 
  return (
    <div>
      <div>현재 시간: {time}초</div>
      <div>구간 기록:</div>
      <ul>
        {laps.map((lap, index) => (
          <li key={lap}>
            구간 {index + 1}: {lap}초
          </li>
        ))}
      </ul>
      <button onClick={start}>시작</button>
      <button onClick={stop}>초기화</button>
    </div>
  );
}

자동 저장

function AutoSave() {
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
 
  const { time, start, stop } = useStopwatch({
    autoStart: true,
    onStart: () => console.log('자동 저장 시작'),
    onStop: () => setLastSaved(new Date()),
    onTick: (currentTime) => {
      if (currentTime > 0 && currentTime % 60 === 0) {
        saveData();
        setLastSaved(new Date());
      }
    },
  });
 
  return (
    <div>
      <div>마지막 저장: {lastSaved?.toLocaleTimeString()}</div>
      <div>다음 저장까지: {60 - (time % 60)}초</div>
    </div>
  );
}

useResizeObserver useThrottle