리액트 타이머 생성

 

개요

회원가입 프로세스 중 이메일 인증 내 인증번호 유효시간에 대한 정보를 노출하기로 하였다.

이를 사용자에게 보여주기 위해 아래와 같이 타이머를 구현하였다.

* 참고로 타이머는 재활용 가능할 것으로 보여 따로 컴포넌트로 생성

---

타이머(Timer) 구현

-  제한시간을 부모로부터 받을 수 있도록 props 사용 + props에 대한 interface선언 for typescript 

-  1초 텀마다 남은 시간 1초씩 감소 -> interval

-  첫 랜더링 시에만 위에서 언급한 interval 한 번만 등록 -> useEffect

ITimeLeftState{
	timeLeft:number;
	setTimeLeft: React.Dispatch<React.SetStateAction<number>>;
}

function Timer({timeLeft,setTimeLeft}:ITimeLeftState){
	
    //시간을 03:00, 02:59 와 같은 형식으로 보여줄 수 있도록 하는 변환 함수
    const formatTime = (time:number) => {
        const minutes = Math.floor(time / 60);
        const seconds = time % 60;
        return `${minutes.toString().padStart(2, '0')}:${seconds
          .toString()
          .padStart(2, '0')}`;
     };
      
    useEffect(()=>{
        const timer = setInterval(()=>{
            setTimeLeft((prevTime)=>prevTime-1);
            console.log(timeLeft);
        },1000);

        return ()=>{clearInterval(timer);} //해당 effect청소 전 마지막 수행
    },[]);
    
    return (
        <>
            <span>{formatTime(timeLeft)}</span>
        </>
    );
 }