React | useState를 이해해보아요

useState는 리액트의 기본 기능입니다. 

아래와 같이 임포트하여 사용 가능합니다. 

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

• 기본 공식 (상태변수 초기화)

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

 

useState는 2개를 받는다.

1. 컴포넌트 안에서 데이터를 관리할 상태 변수: State
2. 데이터가 변화되면 setState 함수로 데이터를 변화시킴

*useState는 한 컴포넌트 안에 여러개 놓을 수 있다.

기본 state, 로딩상태의 state, 등등

 

• 메인페이지에서 사용한 useState

const [ready,setReady] = useState(true)

(데이터가 준비되기 전 로딩화면을 먼저 보여줌)

 

• 이거를 useEffect 에 적용해본다면?

useEffect(()=> { 
	setState(data)
},[])

화면이 그려지자마자 변경된 데이터를 적용한다. 

 

useEffect 는 화면이 그려진 다음 가장 먼저 실행이 됩니다.

• 기본 공식

useEffect(() => {

},[])

• 메인 페이지의 useEffect

useEffect(()=>{
	   
    setTimeout(()=>{
        navigation.setOptions({
            title:'나만의 꿀팁'
        })

        firebase_db.ref('/tip').once('value').then((snapshot) => {
          console.log("파이어베이스에서 데이터 가져왔습니다!!")

          let tip = snapshot.val();
          setState(tip)
          setCateState(tip)
          getLocation()
          setReady(false)
        });
        
    },1000)

 

useState와 useEffect 그리고.. true?

const [ready,setReady] = useState(true)
  useEffect(()=>{
    setTimeout(()=>{
        navigation.setOptions({
            title:'나만의 꿀팁'
        })
        firebase_db.ref('/tip').once('value').then((snapshot) => {
          console.log("파이어베이스에서 데이터 가져왔습니다!!")
          let tip = snapshot.val();
          setState(tip)
          setCateState(tip)
          getLocation()
          setReady(false)
        });
    },1000)
  },[])

아직 데이터를 불러오지 못했다고?

             그럼 ready를 true !

1초가 지나고 데이터를 불러왔다고?

             그럼 setReady를 false!

 

상태의 데이터가 변경되면 return 이 다시 실행된다

 

그러니까..

const [ready,setReady] = useState(true)

ready가 true 상태였는데.. 1초가 지나고 fales가 되었잖아

setTimeout(()=>{
        navigation.setOptions({
            title:'나만의 꿀팁'
        })
        firebase_db.ref('/tip').once('value').then((snapshot) => {
          console.log("파이어베이스에서 데이터 가져왔습니다!!")
          let tip = snapshot.val();
          setState(tip)
          setCateState(tip)
          getLocation()
          setReady(false)
        });
    },1000)

setReady(false) ← 이렇게 상태가 변화되었기 때문에 return을 다시 실행이 되고..!

리턴이 재시작하면서 조건문의 다른 조건이 적용된다.

return ready ? <Loading/> :  (

    <ScrollView style={styles.container}>
		...