[React] props? state?

리액트를 하다보면 'props', 'state'라는 말을 많이 들어봤을 것이다.

언뜻 보기엔 비슷해보이지만 엄연히 다르다.

 

React 공식 문서에서는 이렇게 정의한다.

props (“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. 
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 
state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

출처: https://ko.reactjs.org/docs/faq-state.html#gatsby-focus-wrapper

props

부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터(단방향 데이터 흐름을 가짐)

- props는 수정할 수 없음.(Read-only)

- prop-types를 이용하여 props의 자료형을 미리 선언 가능

- defaultProps를 설정하여 props의 기본값 및 필수값을 설정

 

state

컴포넌트의 내부에서 변경 가능한 데이터를 관리

- state는 변경 가능(changeable)

- 변경 시 리렌더링이 일어남

- state는 setState를 통해서만 변경되어여 함(직접 조작 불가능)

- 너무 많은 state를 사용하는 것은 피해야 함

 

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

 

 

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

https://velog.io/@sun1301/React-Props-VS-State