React와 momentjs로 타이머 만들기

시작하기

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

1
create-react-app timer-app --typescript

구현하기

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

1
npm install moment @types/moment
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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과 시간을 초기상태로 저장합니다.

최종결과물

Share