React와 momentjs로 타이머 만들기

시작하기

리액트와 momentjs를 이용해서 timer를 만들어 보도록 하겠습니다.
create-react-app으로 새로운 프로젝트를 만들어줍니다.

create-react-app timer-app --typescript

구현하기

날짜 관리 라이브러리인 momentjs를 설치해주도록 합니다.

npm install moment @types/moment

App.tsx

import React, { useState } from 'react';
import moment from 'moment';

const App: React.FC = () => {
    const [time, setTime] = useState(moment.duration(0));
    const startTimer = () => {
        
    };

    const pauseTimer = () => {
        
    };

    const stopTimer = () => {

    };

    return (
        <div className="App">
            <h1>타이머</h1>
            <p>{time.format("HH:mm:ss")}</p>
            <button type="button" onClick={() => startTimer()}>시작</button>
            <button type="button" onClick={() => pauseTimer()}>일시정지</button>
            <button type="button" onClick={() => stopTimer()}>정지</button>
        </div>
    );
}

export default App;

타이머의 시간의 상태 및 버튼을 생성하고 각각의 버튼에 대한 함수를 생성 해주도록 합니다.

App.tsx

import React, { useState } from 'react';
import moment from 'moment';

const App: React.FC = () => {
    const [time, setTime] = useState(moment.duration(0));
    const [timeTick, setTimeTick] = useState<NodeJS.Timeout | null>(null);

    const startTimer = () => {
        const tick = () => setTime(prevTime => prevTime.clone().add(1, 'seconds'));
        const timeTick = setInterval(() => {
            tick();
        }, 1000);
        setTimeTick(timeTick);
    };

    const pauseTimer = () => {
        if (timeTick) {
            clearInterval(timeTick);
        }
    };

    const stopTimer = () => {
        pauseTimer();
        setTime(moment.duration(0))
    };

    return (
        <div className="App">
            <h1>타이머</h1>
            <p>{moment(time.asSeconds(), 's').format("HH:mm:ss")}</p>
            <button type="button" onClick={() => startTimer()}>시작</button>
            <button type="button" onClick={() => pauseTimer()}>일시정지</button>
            <button type="button" onClick={() => stopTimer()}>정지</button>
        </div>
    );
}

export default App;

시작버튼을 클릭하면 interval을 timeTick 상태로 넣어주고
일시정지버튼을 클릭 할때 timeTick 상태가 있으면 clearInterval을 해줍니다.
정지버튼을 클릭 했을 경우에는 clearInterval과 시간을 초기상태로 저장합니다.