Timer 기능

import React, { useCallback, useEffect, useRef, useState } from "react";

// 사용자 정의 hook
const useCounter = (initialValue, ms) => {
  const [count, setCount] = useState(initialValue);
  const intervalRef = useRef(null);
  const start = useCallback(() => {
    if (intervalRef.current != null) {
      return;
    }
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, ms);
  }, []);

  const stop = useCallback(() => {
    if (intervalRef.current === null) {
      return;
    }
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }, []);

  const reset = useCallback(() => {
    setCount(0);
    stop();
  }, []);

  return { count, start, stop, reset };
};

export default function SetTimer() {
  // 시, 분, 초를 state로 저장
  const [currentHours, setCurrentHours] = useState(0);
  const [currentMinutes, setCurrentMinutes] = useState(0);
  const [currentSeconds, setCurrentSeconds] = useState(0);
  const { count, start, stop, reset } = useCounter(0, 1000);

  // 타이머 기능
  const timer = () => {
    const checkMinutes = Math.floor(count / 60);
    const hours = Math.floor(count / 3600);
    const minutes = checkMinutes & 60;
    const seconds = count % 60;

    setCurrentHours(hours);
    setCurrentMinutes(minutes);
    setCurrentSeconds(seconds);
  };

  // count의 변화에 따라 timer 함수 렌더링
  useEffect(timer, [count]);

  // count의 변화에 따라 timer 함수 렌더링
  return (
    <>
      <h1>
        {currentHours < 10 ? `0${currentHours}` : currentHours} :
        {currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes} :
        {currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}
      </h1>

      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}

https://shin1303.tistory.com/entry/React-%ED%83%80%EC%9D%B4%EB%A8%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%8B%9C%EC%9E%91-%EC%A0%95%EC%A7%80-%EB%A6%AC%EC%85%8B-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84

[React] state를 활용한 동적인 타이머 만들기 - 시작, 정지, 리셋 기능 구현

---

실전 프로젝트 진행 할 때는 시작/중단/종료가 필요해서 변형 해봤다.

변형한 코드에서는 start를 누르면 타이머가 시작되고 stop을 누르면 멈췄다가 start를 누르면 다시 시작된다.

end를 누르면 멈춘다. 이건 추후에 프로젝트에 맞게 바꿔야 할 것 같다.

import React, { useCallback, useEffect, useRef, useState } from "react";

// 사용자 정의 hook
const useCounter = (initialValue, ms) => {
  const [count, setCount] = useState(initialValue);
  const intervalRef = useRef(null);

  // ** 시작 **
  const start = useCallback(() => {
    intervalRef.current = setInterval(() => {
      setCount(c => c + 1);
    }, ms);
  }, []);

  // ** 중단 **
  const stop = useCallback(() => {
    if (intervalRef.current === null) {
      return;
    }
    clearInterval(intervalRef.current);
    intervalRef.current = count;
    initialValue = count;
  }, []);

  // ** 끝 **
  const end = useCallback(()=>{
    if (intervalRef.current === null) {
      return;
    }
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }, []);

  const reset = useCallback(() => {
    setCount(0);
    stop();
  }, []);

  return { count, start, end, stop, reset };
};

export default function SetTimer() {
  // 시, 분, 초를 state로 저장
  const [currentHours, setCurrentHours] = useState(0);
  const [currentMinutes, setCurrentMinutes] = useState(0);
  const [currentSeconds, setCurrentSeconds] = useState(0);
  const { count, start, end, stop, reset } = useCounter(0, 1000);

  // 타이머 기능
  const timer = () => {
    const checkMinutes = Math.floor(count / 60);
    const hours = Math.floor(count / 3600);
    const minutes = checkMinutes & 60;
    const seconds = count % 60;

    setCurrentHours(hours);
    setCurrentMinutes(minutes);
    setCurrentSeconds(seconds);
  };

  // count의 변화에 따라 timer 함수 렌더링
  useEffect(timer, [count]);

  // count의 변화에 따라 timer 함수 렌더링
  return (
    <>
      <h1>
        {currentHours < 10 ? `0${currentHours}` : currentHours} :
        {currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes} :
        {currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}
      </h1>

      <button onClick={start}>Start</button>
      <button onClick={stop}>End</button>
      <button onClick={end}>Stop</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}