[React] status: 상태 변화에 따른 UI 업데이트

React Native로 앱을 개발 시 알아야 하는 React 개념

-컴포넌트(Component)        - 상태(State,useState)        - 속성(Props)        - useEffect

 

 

• component : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분. UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법(리액트 기반으로 만들어진 페이스북 웹사이트는 운영되는 컴포넌트가 매우 많다고 함)
• 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 -> 사용할 데이터                              useState로 상태(state)를 생성하고, setstate로 상태를 변경할 수 있음. 데이터 변경에 따라 각각 다른 화면을 그려줘야 할 때 사용.
• 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 -> 키와 벨류의 형태로 데이터 전달      ex) <Text> 태그의 numberOfLines 속성으로 표현할 글의 라인 수를 지정하고 설정한 수 이상의 라인은 줄임표로 표현, <Image> 태그의 resize 속성으로 이미지가 영역을 차지하는 방식을 나타냄                                            ex) 직접 만든 Card라는 컴포넌트를 사용하는 곳에 원하는 속성, 예를들어 <Card img={'이미지 주소'}/>라고 입력하면, 그 컴포넌트는 img라는 속성 이름과 그 값으로 '이미지 주소'라는 값을 갖게 됨
• useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

 

useEffect 함수

화면이 그려진 뒤 가장 먼저 실행되는 함수로, 데이터를 준비할 때 사용 -> 데이터를 서버 등에서 받은 후 상태(state)에 반영한다는 뜻

앱 동작 순서: 화면 그리기 -> useEffect가 데이터 준비 -> 상태 업데이트 완료 후 다시 한번 화면 그리기

useEffect(()⇒{
//먼저 실행할 코드
},[])

일반적으로 화면이 먼저 그려지는데, 이 때 사용할 데이터가 준비되어 있지 않으면 오류가 발생한다는 것 잊지 말기 -> useEffect를 이용하여 로딩화면을 만들어주는 등의 방식으로 해결 가능