ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React에서 시간 카운트하기 (경과시간 구하기)
    리액트 2022. 11. 19. 16:49

    React에서 경과 시간을 카운트하는 방법을 알아보겠습니다.

    아래 코드는 단순히 경과 시간을 카운트하는 것이지만, 잘 응용하면 스톱워치처럼 일시정지, 기록, 리셋 기능도 쉽게 만들 수 있습니다.

     

    const Time = ()=>{
    
        const [time,setTime] = useState("00:00:00");
        const startTime = Date.now();
    
        useEffect(()=>{
            setInterval(()=>{
                const currentTime = Date.now();
                const diff = currentTime - startTime;
                // 콘솔로 찍어보기. 콘솔이 두번씩 찍히는 이유는 react 개발 모드의 Strict Mode 때문임
                console.log(diff);
                let hour = Math.trunc(diff/(1000*60*60));
                let min = Math.trunc((diff-(hour*1000*60*60))/(1000*60));
                let sec = Math.trunc((diff-(hour*1000*60*60)-(min*1000*60))/1000);
                // 아래 세줄은 경과시간을 00:00:00 포맷으로 나타내기 위함
                if (hour.toString().length == 1) {hour = "0" + hour;}
                if (min.toString().length == 1) {min = "0" + min;}
                if (sec.toString().length == 1) {sec = "0" + sec;}
                setTime(`${hour}:${min}:${sec}`);
            },1000);
            // 메모리 누수 방지를 위해서 인터벌을 삭제하는 함수를 리턴해주어야 함
            return ()=>clearInterval(intervalForTime);
        },[]);
    
        return(
        	<div>{time}</div>
        );
    }
    
    export default Time;

     

    댓글 0

Designed by Tistory.