[React] state와 props

📗 States

- 리액트는 데이터 중심으로 움직인다. (데이터와 화면의 일치)

- component는 데이터, 화면을 하나로 묶어놓은 것이고 화면에서 바뀔 부분을 state로 만든다.

 

📗 state와 props

- props(properties) 와 state는 일반 JavsScript 객체이다.

- 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있다. (컴포넌트의 render() 함수를 위한 입력 데이터라고 말할 수 있다.)

- props와 state는 HTML 출력이 나오는 "raw data"를 구성한다.

 

 

📗 state와 props의 차이점

- props는 함수 매개변수처럼 컴포넌트에 "전달"되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 "안"에서 관리된다.

- component가 특정 시점에 속성 중 하나를 변경해야 하는 경우 해당 속성은 "state" 여야 한다.

- component는 props를 변경할 수 없다.

 

	props	state
부모 Component로부터 초기값을 가져올 수 있는가?	YES	YES
부모 Component에 의해 변경될 수 있는가?	YES	NO
Component안에서 기본값을 설정할 수 있는가? (부모로부터 받은 props와 state 초기값은 모두 Component 내부에 정의된 기본값보다 우선시 된다.)	YES	YES
Component안에서 변경할 수 있는가?	NO	YES
자식 Component의 초기값을 설정할 수 있는가?	YES	YES
자식 Component에서 변경할 수 있는가?	YES	NO

 

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

GitHub - uberVU/react-guide: React adventures

 

📗 Component에는 State가 있어야 하는가? 

- state는 선택사항이다.

- state는 복잡성을 증가시키고 예측 가능성을 감소시키므로 너무 많은 state 를 사용하는 것은 피해야 한다.