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

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로 바꾼다.

Leave a comment

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다