React 타임워치 (Stopwatch)

React에서 타임워치( Stopwatch )를 구현하는 방법을 설명하겠습니다. 이 구현은 useState와 useEffect 훅을 사용하여 시간 상태를 관리하고, 타이머를 시작하고 중지하는 기능을 포함합니다.

타임워치 컴포넌트 구현

1. 상태 관리: 시간을 초 단위로 저장하기 위한 상태와 타이머의 작동 여부를 저장하기 위한 상태를 만듭니다.
2. 타이머 제어: 타이머를 시작, 중지, 리셋하는 기능을 구현합니다.
3. UI 업데이트: 시간이 업데이트될 때마다 화면에 표시합니다.

import React from 'react';
import Stopwatch from './Stopwatch';

const App = () => {
  return (
    <div>
      <h1>React Stopwatch</h1>
      <Stopwatch />
    </div>
  );
};

export default App;

 

 

import React, { useState, useEffect, useRef } from 'react';

const Stopwatch = () => {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const timerRef = useRef(null);

  useEffect(() => {
    if (isRunning) {
      timerRef.current = setInterval(() => {
        setTime(prevTime => prevTime + 1);
      }, 1000);
    } else {
      clearInterval(timerRef.current);
    }

    return () => {
      clearInterval(timerRef.current);
    };
  }, [isRunning]);

  const handleStart = () => {
    setIsRunning(true);
  };

  const handleStop = () => {
    setIsRunning(false);
  };

  const handleReset = () => {
    setIsRunning(false);
    setTime(0);
  };

  const formatTime = (time) => {
    const getSeconds = `0${(time % 60)}`.slice(-2);
    const minutes = `${Math.floor(time / 60)}`;
    const getMinutes = `0${minutes % 60}`.slice(-2);
    const getHours = `0${Math.floor(time / 3600)}`.slice(-2);

    return `${getHours} : ${getMinutes} : ${getSeconds}`;
  };

  return (
    <div>
      <div>{formatTime(time)}</div>
      <button onClick={handleStart} disabled={isRunning}>Start</button>
      <button onClick={handleStop} disabled={!isRunning}>Stop</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default Stopwatch;

 

 

코드 설명

1. 상태 관리:
   • time: 타이머의 시간(초)을 저장합니다.
   • isRunning: 타이머의 작동 여부를 저장합니다.
2. 타이머 제어:
   • useEffect: isRunning 상태가 변경될 때마다 타이머를 시작하거나 중지합니다. 타이머가 작동 중일 때는 매 초마다 time 상태를 증가시킵니다.
   • handleStart: 타이머를 시작합니다.
   • handleStop: 타이머를 중지합니다.
   • handleReset: 타이머를 리셋하고 시간을 0으로 초기화합니다.
3. UI 업데이트:
   • formatTime: 시간을 "hh : mm : ss" 형식으로 포맷팅하여 화면에 표시합니다.
   • 각 버튼은 타이머의 상태에 따라 활성화 또는 비활성화됩니다.

이 예제는 간단한 타임워치 기능을 구현합니다. 이 기본 구현을 바탕으로 더 복잡한 기능(예: 랩 타임 기록, 밀리초 단위 시간 측정 등)을 추가할 수 있습니다.

 

 

 

아래 소스도 괜찮습니다. 

React로 스톱워치를 만들어보자! start, stop, reset, lap (velog.io)