[React + TypeScript] 타이머 구현하기

어느른,, React 와 TypeScript를 사용해서 인증번호 3분 타이머를 구현해보자!

1️⃣ 우선 타이머 컴포넌트를 따로 만든 후 아래와 같은 변수를 지정해준다.

Timer.tsx
    
    const MINUTES_IN_MS = 3 * 60 * 1000;
    const INTERVAL = 1000;
    const [timeLeft, setTimeLeft] = useState<number>(MINUTES_IN_MS);
    

• MINUTES_IN_MS : 3(몇분) 60(1분) 1000 (1초)
• INTERVAL : 1초
• timeLeft : number타입을 가지고 초기값은 MINUTES_IN_MS 으로 가진다.

2️⃣ useEffect함수 작성하기

    useEffect(() => {
        const timer = setInterval(() => {
            setTimeLeft((prevTime) => prevTime - INTERVAL);
        }, INTERVAL);

        if (timeLeft <= 0) {
            clearInterval(timer);
            console.log('타이머가 종료되었습니다.');
        }

        return () => {
            clearInterval(timer);
        };
    }, [timeLeft]);

• setInterval함수를 사용해 1초마다 1초씩 빼기!
• 초가 끝나면 clearInterval함수를 사용해 종료 시키기
• timeLeft가 변할때마다 useEffect가 실행되도록 의존성 배열에 입력해주기
• useEffect를 사용하지 않으면 1초만 빼고 종료되니 꼭 useEffect 사용하기

3️⃣ 밀리세컨즈 분/초로 보여주기

  const minutes = String(Math.floor((timeLeft / (1000 * 60)) % 60)).padStart(2, '0');
    const second = String(Math.floor((timeLeft / 1000) % 60)).padStart(2, '0');

• 한자리 숫자일때 앞에 0을 붙여서 두자리를 유지시켜주기 위해 padStart를 사용하였다.
  - 계산된 값을 2번째자리에 보여주고 그 앞은 0으로 대체
  

  return (
        <div>
            {minutes} : {second}
        </div>
    );

그리고 변수로 저장한 minutes와 seconds를 return해주면 컴포넌트 작성은 끝이다!🤩

4️⃣ 사용하기

 <div className={'pt-[1rem] w-20 mb-16 ml-3 mt-8 font-bold text-[red]'}>
      {isCodeShow && <Timer />}
 </div>

버튼을 누르면 타이머가 시작되어야 하기 때문에 버튼 클릭하면 isCodeShow = true 로 변하게 state를 설정해두었다.

그래서 isCodeShow가 true 일때만 타이머가 작동할 수 있게 위처럼 코드를 작성했다.

---

📍 전체코드

export const Timer = memo(() => {
    const MINUTES_IN_MS = 3 * 60 * 1000;
    const INTERVAL = 1000;
    const [timeLeft, setTimeLeft] = useState<number>(MINUTES_IN_MS);

    const minutes = String(Math.floor((timeLeft / (1000 * 60)) % 60)).padStart(2, '0');
    const second = String(Math.floor((timeLeft / 1000) % 60)).padStart(2, '0');

    useEffect(() => {
        const timer = setInterval(() => {
            setTimeLeft((prevTime) => prevTime - INTERVAL);
        }, INTERVAL);

        if (timeLeft <= 0) {
            clearInterval(timer);
            console.log('타이머가 종료되었습니다.');
        }

        return () => {
            clearInterval(timer);
        };
    }, [timeLeft]);

    return (
        <div>
            {minutes} : {second}
        </div>
    );
});