상태(useState)와 useEffect

useState

컴포넌트 안에서 상태를 관리방법인 '상태'

react는 상태(state)가 바뀌어야 화면이 바뀐다
반대로 데이터를 불러와서 변수로 설정하면 이 값이 바뀌어도 화면에 실시간으로 적용되지 않는다

예를 들어 주식 앱의 경우 실시간으로 데이터가 바뀔 때마다 화면을 다시 그려야 하는데 이때 데이터를 state로 관리하면 된다

내가 스크랩한 것을 모아보는 뷰가 있다면 스크랩 데이터가 바뀔 때마다 뷰가 바뀌어야 하니 state로 관리하면 되겠다

useState 사용법

const [state, SetState] = useState([])
//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
//State는 컴포넌트 안에서 데이터를 관리할 상태 변수 

//setState는 state를 변경시킬때 사용해야하는 함수
//데이터가 변화되면 setState 함수로 데이터를 변화해준다

//모두 다 useState가 선물해줌
//useState()안에 전달되는 값은 state 초기값

state는 데이터가 담긴 변수
setState는 state 데이터를 관리하는 함수

이걸 컴퍼넌트 안에서 관리를 useEffect 안에서 한다

useEffect

useEffect 사용법

useEffect는 그냥 함수인데 외부에서 데이터를 불러화 준비시키는 과정을 한다
예를 들어 카톡을 키면 로그인이 됐는지 아닌지 확인하고 이에 맞는 뷰를 뿌려야 함

보통 useEffect는 데이터를 준비할 때 사용
데이터를 준비한다는 것은, 데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻합니다. 이런순서로 말이죠

1) 화면이 그려진다
2) useEffect가 데이터를 준비한다
3) 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다

이를 다시 정리하면

1) return으로 그려진 화면이 나온다
2) useEffect가 데이터를 서버로부터 받은 후 state에 반영한다
3) 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다

화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시그릴때 주로 사용된다

useEffect(()=>{

	//...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
    //return값으로 그려진 화면이 그려지고난 후 실행된다고 이해하면 됨 

},[])

삼항연산자