해당 글에서는 react-native 기반의 스탑워치 기능으로 시간-분-초(HH:mm:ss), 분-초-밀리세컨드(mm:ss:SSS) 형태의 기능 구성에 대해서 공유합니다.
1) 스탑워치 기능 : 시간-분-초(HH:mm:ss)
💡 해당 화면에서는 스탑워치 기능으로 시간-분-초(HH:mm:ss) 형태로 출력을 합니다
- handleStartStop()는 스탑워치의 시작/종료의 기능을 수행하는 함수입니다. - handleReset()는 스탑워치 시간을 리셋하는 기능을 수행하는 함수입니다. - formatTime()는 state에 갱신된 시간에 따라 데이터를 시간-분-초(HH:mm:ss) 형태로 변환해 주는 함수입니다.
1. 구성 코드
💡 ‘Start’ 버튼 : handleStartStop()
- isActive의 값을 true로 변환해주고 감시하던 useEffect의 state 값이 갱신됨에 따라서 second 값을 갱신합니다. 또한 formatTime()를 통해 변환된 second 값을 원하는 출력 형태로 바꿔줍니다.
💡 ’Stop’ 버튼 : handleStartStop()
- isActive의 값을 false로 변환해주고 감시하던 useEffect의 state 값이 갱신됨에 따라서 활성화를 멈추게 됩니다.
💡 ’Reset’ 버튼: handleReset()
- isActive의 값을 false로 변환하고 초를 0으로 초기화 합니다.
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
/**
* StopWatch 기능을 관리합니다.
*/
const Stopwatch = () => {
const [seconds, setSeconds] = useState<number>(0); // 초
const [isActive, setIsActive] = useState<boolean>(false); // 활성화 여부
/**
* 렌더링 초기에 수행하며 isActive와 seconds가 갱신되면 추가 수행합니다.
*/
useEffect(() => {
let interval: NodeJS.Timer;
// [CASE1] 활성화 되어 있는 상태라면 interval을 통해 초를 늘려갑니다.
if (isActive) {
interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
}
// [CASE2] 활성화 되어 있지 않은 상태라면 시간을 초기화 합니다.
else if (!isActive && seconds !== 0) {
clearInterval(interval!);
}
// [CASE3] 해당 컴포넌트를 벗어나는 경우 초기화 합니다.
return () => clearInterval(interval);
}, [isActive, seconds]);
/**
* 시작과 종료 버튼에 대한 관리를 수행합니다.
*/
const handleStartStop = (): void => {
setIsActive(!isActive);
// 종료를 하는 경우 수행시간을 반환 받습니다.
if (!isActive) {
const nowTimes = formatTime(seconds);
console.log(nowTimes);
}
}
/**
* stopwatch의 리셋 기능을 관리합니다.
*/
const handleReset = (): void => {
setSeconds(0);
setIsActive(false);
}
/**
* 타이머의 시간들을 format에 맞추어 재구성합니다.
*/
const formatTime = (time: number) => {
const hours: number = Math.floor(time / 3600); // 시간
const minutes: number | string = Math.floor((time - (hours * 3600)) / 60); // 분
const seconds: number | string = time - (hours * 3600) - (minutes * 60); // 초
const hoursStr: string = hours < 10 ? "0" + hours : String(hours);
const minutesStr: string = minutes < 10 ? "0" + minutes : String(minutes);
const secondStr: string = seconds < 10 ? "0" + seconds : String(seconds);
return `${hoursStr} : ${minutesStr} : ${secondStr}`
}
// =============================================================================================================================
return (
<View style={styles.container}>
{/* 스탑워치 시간 영역 */}
<View>
<Text style={styles.times}>{formatTime(seconds)}</Text>
</View>
<View style={{ marginBottom: 20 }}></View>
{/* 스탑워치 버튼 영역 */}
<View style={{ flexDirection: "row" }}>
<TouchableOpacity onPress={handleStartStop}>
<Text style={{ fontSize: 24, fontWeight: 'bold', marginRight: 20 }}>
{isActive ? 'Stop' : 'Start'}
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleReset}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Reset</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 250
},
times: {
fontSize: 48
},
});
export default Stopwatch;
2. 구성화면
2) 스탑워치 기능 : 분-초-밀리세컨드(mm:ss:SSS)
💡 해당 화면에서는 스탑워치 기능으로 분-초-밀리세컨드(mm:ss:SSS) 형태의 데이터 구조를 가집니다.
- handleStart()는 스탑워치의 시작의 기능을 수행하는 함수입니다. - handleStop()는 스탑워치의 멈춤 기능을 수행하는 함수입니다. - handleReset()는 스탑워치 시간을 리셋하는 기능을 수행하는 함수입니다. - formatTime()는 state에 갱신된 시간에 따라 데이터를 분-초-밀리세컨드(mm:ss:SSS) 형태로 변환해 주는 함수입니다.
1. 구성 코드
💡 ‘Start’ 버튼 : handleStart()
- isRunning의 값을 true로 변환해주고 감시하던 useEffect의 state 값이 갱신됨에 따라서 time 값을 갱신합니다. 또한 formatTime()를 통해 변환된 second 값을 원하는 출력 형태로 바꿔줍니다.
💡 ’Stop’ 버튼 : handleStop()
- isRunning의 값을 false로 변환해주고 감시하던 useEffect의 state 값이 갱신됨에 따라서 활성화를 멈추게 됩니다.
