반응형

Timer 3

[React Native] Hooks를 이용한 Timer functional component

React Native Hooks를 이용한 Timer functional component React Native에서 Hooks functional component를 사용한 타이머를 예제입니다. 입력 props로 주어진 sec에서 매초마다 1씩 감소하는 형식입니다. import React, { useState, useEffect, useRef } from 'react'; import { Text, StyleSheet } from 'react-native'; var _interval const Timer = ({ sec, style }) => { const [second, setSecond] = useState(sec); const [delay, setDelay] = useState(1000); cons..

[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 Stop..

[React Native] react-native-stopwatch-timer

React Native react-native-stopwatch-timer API를 사용한 stopwatch 구현 React Native 앱 개발 중 스탑워치를 API를 사용해서 구현하는 것을 알려드립니다. npm에서 제공하는 기본 코드는 class component 형식을 사용하고 있는데요, 요즘 방식인 hooks functional component 방식으로 변경해서 사용하는 방법을 보여드리겠습니다. 우선 아래 코드를 입력해서 react-native-stopwatch-timer를 설치해 줍니다. npm install react-native-stopwatch-timer 이 API는 시간초가 증가하는 stopwatch랑 timer 두 가지를 제공하는데요, 저는 stopwatch만 사용해서 하는 방법을 보..

반응형