[RN] 상태 관리 해보자 : useState, useEffect

useEffect란 생명주기와 연관이 있다

view가 Load 되었을때 호출될거나,

State의 값이 변경 되었을때 호출 되거나,

view가 Disappear할때 호출되기도 한다

 

일단 코드를 한번 읽어 보자

 

const [state, setState] = useState([])

이런식으로 사용할 state값을 init 한다

하지만 안에 값이 전혀 안들어 있다 

값을 넣을때면 setState를 호출 하면 된다 

[변수, 함수] 뒤에껀 callback이다

 

setState(data.tip)

이 함수 호출을 통해 data에 값을 넣어주고있다

 

그리고 TouchableOpactiy를 통해 click 된 경우 

category라는 선언형 함수를 실행한다

cate를 매개변수로 받고 있으면 

cate: String을 setCateState를 통해 cateState라는 상태 변수에 값을 넣어주고있다

그러면 무슨 일이 일어날까?

 

setCateState가 호출되었으니 

시스템은 자동적으로 view를 다시 그려준다 개꿀...

 

Swift Combine의 ObservedObject를 너무나도 쉽게 구현하는 것이다

 

 

 

 

import React, { useState, useEffect } from 'react';

import data from '../data.json';

export default function MainPage() {

    const [state, setState] = useState([])
    const [cateState, setCateState] = useState([])
    const [ready, setReady] = useState(true)

    useEffect(() => {

        setTimeout(() => {
            setState(data.tip)
            setCateState(data.tip)
            setReady(false)
        }, 1000)


    }, [])
    
    const category = (cate) => {
        if (cate == "전체보기") {
            setCateState(state)
        } else {
            setCateState(state.filter((d) => {
                return d.category == cate
            }))
        }
    }
    
    return ready ? <Loading /> : (
    
       <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
                <TouchableOpacity style={styles.middleButtonAll} onPress={() => { category('전체보기') }}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>
                <TouchableOpacity style={styles.middleButton01} onPress={() => { category('생활') }}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
                <TouchableOpacity style={styles.middleButton02} onPress={() => { category('재테크') }}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
                <TouchableOpacity style={styles.middleButton03} onPress={() => { category('반려견') }}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
                <TouchableOpacity style={styles.middleButton04} onPress={() => { category('꿀팁 찜') }}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
        </ScrollView>
    )
}