[React] 타이머 만들기 react-compound-timer 라이브러리 활용

react-compound-timer

라이브러리를 사용하여 타이머를 만들어보았다.

https://www.npmjs.com/package/react-compound-timer

react-compound-timer

코드에 관한 설명은 위 링크 내용을 참고해주세요

import React from 'react'
import Timer from 'react-compound-timer/build';

export default function SetTimer() {

    const Hours = Timer.Hours
    const Minutes = Timer.Minutes
    const Seconds = Timer.Seconds

    console.dir(Timer)

    return (
     <Timer startImmediately={false} >
            {({ start, resume, pause, stop, reset, timerState }) => (
                <React.Fragment>
                    <div>
                        <span><Hours /> : hours </span>
                        <span><Timer.Minutes /> : minutes </span>
                        <span><Timer.Seconds /> : seconds </span>
                    </div>
                    <br />
                    <div>
                        <button onClick={start}>Start</button>
                        <button onClick={pause}>Pause</button>
                        <button onClick={resume}>Resume</button>
                        <button onClick={stop}>Stop</button>
                        <button onClick={reset}>Reset</button>
                    </div>
                </React.Fragment>
            )}
        </Timer>
    )
}

라이브러리를 통해 타이머는 정상 동작을 한다.

출력 결과

문제

위 결과 처럼 1분 1초 상태가 아닌 01분 01초로 나타나길 원한다.

//Seconds에 조건을 걸어주려 했음
    let Seconds = Timer.Seconds
    Seconds = `${Seconds < 10 ? `0${Seconds}` : Seconds} `;

//Seconds를 받아올때 0을 추가해주려 했음
	const Seconds = String(Timer.Seconds.padStart(2, "0"))

위 방법들은 오류가 발생했다. 그 이유는 Timer.Seconds의 type이 function이여서 그런것 같다.

해결

React가 아직 익숙하지 않지만 스스로 타이머를 만들어보는것이 더 의미가 있을것이라 생각하여 직접 만들게 되었다.

00:00:00 으로 나오는것도 해결되었다.

import React, { useState } from 'react'

export default function SetTimer() {
//시간, 분, 초를 따로 저장해 두었다.
    const [currentHours, setCurrentHours] = useState(0);
    const [currentMinutes, setCurrentMinutes] = useState(0);
    const [currentSeconds, setCurrentSeconds] = useState(0);

// TIME에 따라 시,분,초 가 변경되도록 하기위해 TIME값을 따로 만들었다.
    let TIME = 0;
    let cron;

    const startButton = () => {
        updateTimer();
        cron = setInterval(updateTimer, 1000);
    };

    const updateTimer = () => {
        const checkMinutes = Math.floor(TIME / 60);
        const hours = Math.floor(TIME / 3600);
        const minutes = checkMinutes % 60;
        const seconds = TIME % 60;
        setCurrentHours(hours)
        setCurrentSeconds(seconds)
        setCurrentMinutes(minutes)
        TIME++;
    }

    return (
        <>
            <h1>{currentHours < 10 ? `0${currentHours}` : currentHours}:{
                currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{
                    currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}</h1>
            <button onClick={startButton}>시작</button>
        </>
    )
}

실행화면

결과

https://ssc9811.github.io/Study_Helper/

TimerUp

위 사이트는 Vanilla JS로 타이머를 만들었던 내용이다.

React로 해도 금방 만들 수 있을거라 생각했는데 Hook과 React 특유의 작동방식등이 Vanilla JS와는 다른점이있어서
오류가 많이 발생하고 있다. 어려움의 연속인것 같다.