2021-06-22 :: React로 스탑워치 만들기

  const [timer, setTimer] = useState(0);
  const [isActive, setIsActive] = useState(false);
  const countRef = useRef(null);

  const startTimer = () => {
    if (!isActive) {
      setIsActive(true);
      setTimer(0);
      countRef.current = setInterval(() => {
        setTimer((timer) => timer + 1);
      }, 10);
    }
  };

  const stopTimer = () => {
    setIsActive(false);
    clearInterval(countRef.current);
  };

timer에 시간이 저장이 되고 아래와 같이 formatting을 거쳐 사용하면 된다. 기준은 ms

slice(-2)를 통해 뒤에 두개의 숫자만 저장한다.

  const formatTime = () => {
    const getMsec = `0${timer%100}`.slice(-2);
    const getSec = `0${Math.floor(timer/100)}`.slice(-2);
    const getMin = `0${Math.floor(getSec/60)}`.slice(-2);
    return `${getMin}:${getSec}.${getMsec}`;
  }

https://dev.to/abdulbasit313/how-to-develop-a-stopwatch-in-react-js-with-custom-hook-561b

How to develop a Stopwatch in React JS with custom hook