React Native

(작성중) function component example

Machine_웅 2020. 8. 17. 14:37
728x90
반응형
import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert, TouchableOpacity } from 'react-native';



const functionCompo = (props) => {

    // 초기 데이터가 있는경우 처리 
    var init_data = 0;
    if(props.route.params != undefined){
        init_data = props.route.params.data
    }

    const [count, setCount] = useState(init_data);

    function test(){
        props.navigation.goBack()
    }


    useEffect(() => {
        // 생명주기의 통합이라고 생각 하면 된다 . 
        // componentDidMount, componentDidUpdate및 componentWillUnmount결합.
        console.log()
      
      return () => {
        // retrun 은 화면을 떠날시 실행한다.
        console.log("Clean up");
      };
    }, [count]);
    
    return (

        <View style= {{flex:1, backgroundColor:'black'}}>
            <TouchableOpacity
                activeOpacity = {1}
                style= {{height:50, backgroundColor:'white',justifyContent:'center',alignItems:'center'}}
                onPress= {() => setCount(count + 1)}
            >
                <Text>{count}</Text>
            </TouchableOpacity>
            <TouchableOpacity
                activeOpacity = {1}
                style= {{height:50, backgroundColor:'white',justifyContent:'center',alignItems:'center'}}
                onPress= {() =>test()}
            >
                <Text>뒤로가기</Text>
            </TouchableOpacity>
        </View>
    )
}

export default functionCompo
728x90
반응형

'React Native' 카테고리의 다른 글

flatlist 성능 이슈 관련  (0) 2020.08.23
ScrollView 관련  (0) 2020.08.22
이슈 ) 파일 업로드시 [TypeError : Network request failed]  (0) 2020.08.12
자바스크립트 Map  (0) 2020.08.06
react native 뷰페이저 인디케이터  (0) 2020.08.05