[React] Component / Props / State

1. Component

- UI를 재사용 가능한 개별적 조각들로 나눔

- 엘리먼트(일반 객체)는 React 앱의 가장 작은 단위로 컴포넌트의 구성요소

 

2. props (읽기전용)

- 부모 컴포넌트에서 자식컴포넌트로 데이터 전달 시 사용 (단방향 데이터 전송시 사용)

 

3. state

- 컴포넌트 내부에서 선언하여 내부 값을 변경 가능 (데이터 유동적 다룰 때 사용)

-> this.state로 state 객체의 초기 값 설정 (보통 생성자 내에서)

-> 데이터 변경 가능

-> 변경된 상태를 컴포넌트에게 알려주기 위해 setState(리렌더링됨)함수 사용 = 새로운 값 주기

 

 

 

--------------------------------------------활용------------------------------------------------------

- Header(자식1), Nav(자식2), Article(자식3), App(부모) Component들 사용

- 부모컴포넌트에서 넘긴 props 데이터 자식 컴포넌트에서 this.props로 받음

 

컴포넌트 내부 선언 (state)

 

부모(App.js)컴포넌트 -> 자식 컴포넌트 (props)

 

 

 

react 실행 결과

 

* constructor(): 생성자

- 생성자 내부에선 setState() 호출 불가

* super(props) : 생성자 내부에서 this.props를 정상적으로 사용할 수 있도록 보장함