[React Native] Stopwatch - Functional Component Hooks

React Native Stopwatch - Functional Component Hooks 구현

React Native 앱 개발 stopwatch component 구현 예제(example)를 보여드리겠습니다.

 

별도의 API는 사용하지 않으며 React의 useRef를 사용하여 구현한 방법입니다.

Functional Component방법을 사용하여 구현하였습니다.

 

StopWatch.js

import React, { useState, useRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

const StopWatch = () => {
  const [timer, setTimer] = useState(0)
  const [isActive, setIsActive] = useState(false)
  const increment = useRef(null)

  const handleStart = () => {
    setIsActive(!isActive)
    {
      !isActive ?
      (increment.current = setInterval(() => {
        setTimer((timer) => timer + 1)
      }, 10))
      :
      (clearInterval(increment.current))
    }
  }

  const handleReset = () => {
    clearInterval(increment.current)
    setIsActive(false)
    setTimer(0)
  }

  const formatTime = () => {
    const getSeconds = `0${(timer % 60)}`.slice(-2)
    const minutes = `${Math.floor(timer / 60)}`
    const getMinutes = `0${minutes % 60}`.slice(-2)
    const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)

    return `${getHours}:${getMinutes}.${getSeconds}`
  }

  return (
    <View style={styles.container}>
      <AppText style={styles.text}>
        {formatTime()}
      </AppText>
      <TouchableOpacity onPress={handleStart}>
        <Text style={{ fontSize: 30 }}>{!isActive ? "Start" : "Stop"}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleReset}>
        <Text style={{ fontSize: 30 }}>Reset</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignSelf: 'center'
  },
  text: {
    fontSize: 44,
  }
})

export default StopWatch;

코드에는 Hour, Minutes, Second로 되어있지만 분, 초, 밀리초를 출력하게 하였습니다.

setIsActive 함수 내의 setInterval구문에서 마지막 10을 1000으로 변경하시면 시, 분, 초 형식으로 사용가능 합니다.

 

Hooks의 useRef를 사용하여 increment라는 ref를 생성 current는 setInterval을 호출하여,

조건의 시간마다 새로 갱신되어 useState를 변경해주는 방식입니다.

 

시작과 멈춤은 하나의 버튼에서 상태에 따라 start 혹은 stop으로 표시하게 하였습니다.

버튼이 눌리면 isActive 상태를 변경 시켜주며, 삼항 연산자를 사용하여 상태에 따라서 시간초를 증가시키거나 멈추게 하였습니다.

 

Reset의 경우는 실행 상태에 false를 주어 멈추게 하였고

Timer의 값을 0으로 초기화 시켜주었습니다,