React Timer 컴포넌트 (with hooks, setInterval)

토큰 만료기간을 사용자에게 알려주기 위해 타이머가 필요했다.

useTimer를 할까했는데 아예 컴포넌트로 만든 예시가 많아서 참고해 구현했다.

일단 필요한 기능은 5분 제한과 재시작이고, 코드는 다음과 같다.

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

const Timer = ({ active, onCheckTime }) => {
  //5분 고정이 아닐 경우 Props로 전달
  const [min, setMin] = useState(5);
  const [sec, setSec] = useState(0);

  useEffect(() => {
    let timer;
    //clearInterval(timer);
    if (active) {
      timer = setInterval(() => {
        if (Number(sec) > 0) {
          setSec(Number(sec) - 1);
        }
        if (Number(sec) === 0) {
          if (Number(min) === 0) {
            clearInterval(timer);
            onCheckTime();
          } else {
            setMin(Number(min) - 1);
            setSec(59);
          }
        }
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [min, sec, active]);

  return (
    <span>
      {min}:{sec < 10 ? `0${sec}` : sec}
    </span>
  );
};

export default Timer;

사용예시

(렌더링)

{isActiveTimer && (

)}

• isActiveTimer값은 토큰 요청을 할 때는 false로 했다가, 서버의 응답(토큰값)을 받게 되면 true로 바꾼다.