[ Vite + React ] Timer 만들기

제한시간을 두기 위해 타이머 기능을 구현

---

Timer Component

 

컴포넌트로 만들어서 다른곳에서도 재사용 할 수 있도록 세팅

 

제한시간을 둘 값을 prop로 전달, 타이머가 종료 되었을 경우 특정 함수가 실행 되도록 설정

memo를 사용한 이유는 react가 재렌더링이 될 경우 Timer 컴포넌트도 재렌더링 되는 경우를 막고자 prop의 값이 변경될때만 재렌더링이 되도록 처리

 

memo : prop 값이 변경이 되어야 재렌더링을 한다.

 

MINUTES_IN_MS 는 initTime * 1000을 해서 initTime에 제한 시간 초를 보내어서 분으로 처리되게 설정

만약 3분이 제한이라면 initTime에 180을 보내면 3분으로 설정이된다.

 

이후 useEffect() 를 활용하여 시간이 변경될때마다 보여주는 분과 초를 다시 재렌더링 시킨다.

clearInterval(timer)로 제한시간이 오버되거나 unmount될때 반복 실행을 중단

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

export const Timer = memo(({initTime, handleTimeOut}) => {
    const MINUTES_IN_MS = initTime * 1000;  // 3분
    const INTERVAL = 1000;  // 1초
    const [timeLeft, setTimeLeft] = useState<number>(MINUTES_IN_MS);

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

    useEffect(() => {
        // 타이머 설정
        const timer = setInterval(() => {
            setTimeLeft((prevTime) => {
                if (prevTime <= 0) {
                    clearInterval(timer);  // 타이머 종료
                    handleTimeOut()
                    return 0;
                }
                return prevTime - INTERVAL;
            });
        }, INTERVAL);

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

    return (
        <>
            {minutes} : {seconds}
        </>
    );
});

 

그럼 계속해서 1초씩 감소하는 타이머를 화면에 보여준다.