[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);
    const [isRunning, setIsRunning] = useState(true);

    useInterval(() => {
        setSecond(second - 1)
    }, second >= 1 ? delay : null);

    //setIsRunning(false);

    return (
        <Text style={{ ...styles.text, ...style }}> {Math.floor(second / 60)} : {second % 60} </Text>
    )
}

function useInterval(callback, delay) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
}

const styles = StyleSheet.create({
    text: {
        fontSize: 13,

        color: 'red'
    }
})

export default Timer;