useInterval을 활용한 타이머 기능 만들기

이번 포스트에서는 타이머 기능을 만드는 방법을 알아본다.

 

본인이 선택한 방식은 useInterval로, react에서 제공하는 hook이 아니라 custom hook이다.

이를 활용하는 이유는 setInterval과 clearInterval을 활용하여 타이머를 만드는 것보다 장점이 많다.

1. 코드가 간결해진다.
2. delay를 변수로 활용 가능하다.

import { NextPage } from "next";
import { useState } from "react";
import { useInterval } from "react-use";

const Test: NextPage = () => {
  /*********************************************************************
   * 1. Init Libs
   *********************************************************************/
  /*********************************************************************
   * 2. State settings
   *********************************************************************/
  const [timer, setTimer] = useState<number>(0);
  const [delay, setDelay] = useState<number>(1000);
  /*********************************************************************
   * 3. Handlers
   *********************************************************************/
  useInterval(() => {
    if (timer > 0) setTimer(timer - 1);
  }, delay);

  console.log("###", timer);

  /*********************************************************************
   * 4. Props settings
   *********************************************************************/
  /*********************************************************************
   * 5. Page configuration
   *********************************************************************/
  return (
    <div>
      <button
        type="button"
        onClick={() => {
          setTimer(10);
        }}
      >
        시작
      </button>
      <button
        type="button"
        onClick={() => {
          setDelay(2000);
        }}
      >
        변경
      </button>
    </div>
  );
};

export default Test;

위의 코드를 실행해보면 아래와 같이 타이머가 진행되는 것을 볼 수 있다.

변경버튼을 통해 delay를 변경하면 1초 간격으로 진행되던 타이머가 2초 간격으로 변경되어 진행되는 것을 확인가능하다.

 

지금 만든 코드는 정말 간단한 타이머 기능으로 여기에 초기화, 일시정지, 만료 등의 기능을 추가하면서 커스텀하면 메일 인증 만료 시간 등에 활용이 가능해진다.

본인 역시 이 코드를 기반으로 커스텀하여 플랫폼에 필요한 인증 기능을 개발했다.