.png)
컴포넌트(Component)
정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법이다. 즉, 화면의 모든 부분이다.
이렇게 컴포넌트로 생각하고 앱을 개발해 나아간다면, 코드 재사용이 용이 해집니다.
속성(Props)
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이다. 전달 모습은 키와 벨류의 형태이다.
-
컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(content={content}) 형태로 전달해줘야 할 것
-
컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을 것
-
비구조 할당 방식
딕셔너리에서 키값을 바로 취해서 변수로써 함수안에서 즉시 사용할 수 있는 방식
이 방식으로 넘겨준 키값을 {키,키,키} 비구조 할당 방식으로 바로 꺼내서 사용하면 된다.
상태(State)
컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!
UI = component(state)
사용자 화면(UI)은 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다는 뜻
리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있습니다.
const [state,setState] = useState([])컴포넌트마다 데이터를 보유하고 관리할 수 있는데 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태라 부른다.
useEffect
화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
데이터를 준비할 때 사용
데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻한다.
화면이 그려진다(로딩페이지) -> useEffect가 데이터를 준비한다 -> 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다(메인페이지)
