React의 State와 Props

State와 Props의 공통점

• state와 props ("properties"의 줄임말) 둘 다 일반 JavaScript 객체다.
• 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있다.

State와 Props의 차이

... props are a way of passing data from parent to child. ... State is reserved only for interactivity, that is, data that changes over time.
... props는 부모에서 자식으로 데이터를 전달하는 방법입니다... state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용합니다.
-Facebook's React Guide

State

컴포넌트의 상태를 나타내며, props와 달리 setState(useState - Hooks)를 이용해서 값을 변화시킬 수 있다. state가 변경되면, 컴포넌트는 다시 렌더링된다.

• 상태에 따라 변화하는 값
• 직접 변경 가능
• state가 변경되면 컴포넌트 리렌더링
• (함수 내 선언된 변수 처럼) 컴포넌트가 스스로 관리

Props

부모 자식의 관계에 있는 컴포넌트 간에 상태나 특정 값을 전달하기 위해 사용된다. State와 달리, 상속하는 부모 컴포넌트로부터 상속 받는 자식 컴포넌트 내에서 수정이 불가능하다. 단, state를 변경시키는 함수를 props로 전달하여 자식 컴포넌트에서 부모 컴포넌트의 state를 변경하는 것은 가능하다 (Lifting State Up).

• 읽기만 가능
• 상위 컴포넌트에서 정해지는 값
• 초기값 설정과 자료형의 유효성 검사 가능
• (함수 매개변수처럼) 컴포넌트에 전달

정리

항목	State	Props
부모 컴포넌트로부터 초기값을 가져올 수 있는가?	O	O
부모 컴포넌트에 의해 값이 변할 수 있는가?	O	X
컴포넌트 내에 기본 값을 설정할 수 있는가?	O	O
컴포넌트 내에서 값이 바뀔 수 있는가?	X	O
자식 컴포넌트를 위해 초기 값을 설정할 수 있는가?	O	O
자식 컴포넌트에서 값이 바뀔 수 있는가?	O	X

참고자료
uberVU/react-guide
[React]Props와 State의 차이
React 공식문서 - 컴포넌트 State