React Native Stopwatch Timer

React Native를 이용해서 안드로이드 앱을 만들어보고 있습니다.

간단한 게임을 만들면서 타이머 기능이 필요해서 찾아보다가 보니까 react-native-stopwatch-timer 모듈(이라고 호칭하는지 모르겠네요)이 있어서 바로 적용을 하려고 했는데, TypeError로 진행이 안되더라고요.

구글링으로 뒤져봐도 react-native-stopwatch-timer의 깃허브에 있는 예제가 웹상에서는 제대로 동작하는 것으로 나오는데, 제 코드에 거의 변경 없이 넣으면 에러가 나고...

  Error message : TypeError: Cannot set property 'currentTime' of undefined

 

그래서 이 모듈을 포기하고, 다시 찾은 예제가 React Native Create Stopwatch Timer Android iOS Example Tutorial입니다. 다만 이 예제는 1초 단위로 동작하는 타이머여서 이것을 밀리초(1/100 초) 단위로 동작하도록 수정해서 사용하였습니다. 이 예제에서 Stopwatch/Timer를 구현한 방식은 아래와 같습니다.

우선 시간 단위인 분, 초를 문자열 '00'으로 초기화해서 가지고 있습니다. 그리고 타이머 항목에 setInterval을 적용해서 매 1초마다 시간 단위를 증가시켜서 타이머가 화면에서 증가되는 모습을 보여주는 것입니다. 이것을 밀리초 단위로 확장한 것뿐이며 수정된 코드의 내용은 다음과 같습니다.

 

Constructor에서 timer와 시간 단위인 분, 초, 밀리초를 초기화합니다.

constructor(props) {
    super(props);
    this.state = {
      timer: null,
      minutes_Counter: '00',
      seconds_Counter: '00',
      msec_Counter: '00',
      startDisable: false
    };
  }

 

setInterval()로 timer가 매 1 밀리 초마다 시간 단위 숫자를 증가시켜서 문자열로 가지고 있도록 합니다.

/** setInterval의 '10'은 1/100초마다 동작하도록 하게 함 */
let timer = setInterval(() => {
      /** 현재의 1/100초를 1 증가해서 문자열로 저장 */
      var mSecNum = (Number(this.state.msec_Counter) + 1).toString();
      /** 현재의 초 값을 받아옴 */
      var secNum = this.state.seconds_Counter;
      /** 현재의 분 값을 받아옴 */
      var minNum = this.state.minutes_Counter;

	  /** 현재의 1/100초가 99 라면 초 단위와 분 단위 값을 수정함 */
      if (Number(this.state.msec_Counter) == 99) {
        secNum = (Number(this.state.seconds_Counter) + 1).toString();

        if (Number(this.state.seconds_Counter) == 59) {
          minNum = (Number(this.state.minutes_Counter) + 1).toString();
          secNum = '00';
        }

        mSecNum = '00';
      }

      /** 시간단위 변수가 10 미만의 값인 경우에 2자리 값을 맞추어서 저장 */
      this.setState({
        minutes_Counter: minNum.length == 1 ? '0' + minNum : minNum,
        seconds_Counter: secNum.length == 1 ? '0' + secNum : secNum,
        msec_Counter: mSecNum.length == 1 ? '0' + mSecNum : mSecNum,
      });

    }, 10);
    
    this.setState({ timer });
    this.setState({startDisable : true})
    

 

1/100초 단위로 동작하도록 타이머를 수정한 부분만 올려놓습니다. 기본적인 초 단위 타이머의 전체 예제는 제가 참고한 React Native Create Stopwatch Timer Android iOS Example Tutorial에서 보시면 됩니다.