Props vs. State

React에는 두 가지 데이터 “모델”인 props와 state가 있습니다. 이 둘 사이의 차이점을 이해하는 것이 중요합니다.
-React 공식 문서 (React로 사고하기)-

react props와 state

Component란

Props와 State에 대한 차이점을 이야기하기 전에 component가 무엇인지 살펴보자.

component에 대한 programminng적 지식 말고, state와 props를 이해하기 위한 관점으로 말이다.

 

component의 주된 역할은 raw data를 풍부한 표현의 HTML로 변환하는 것이다.

수학적인 관점에서는, component를 raw data를 input으로 받고 적절한 HTML을 ouput으로 출력하는 하나의 함수라고도 볼 수 있다.

 

좀 더 전문적인 용어로 정의하자면, props와 state는 해당 Component의 output HTML에 대하여 deterministic 하다.

즉, props와 state가 같다면 항상 동일한 output HTML을 출력해야 한다.

(props와 state는 그 output을 결정하는 값들이어야 한다.)

 

또, props와 state의 변화는 render update를 야기해야 한다.

(함수에 대한 입력값이 달라졌으면 새로운 출력 값을 위해 다시 계산하는 게 당연하지 않은가?)

 

props와 state 이 외의 Component 안에서 선언하는 변수들은 그저 동작을 원활하게 만들어 주기 위한 local 변수일뿐이다.

 

내 raw data는 props일까 아니면 state일까?

다 필요 없고, 내가 component에게 줄 변수(raw data)가 state인지 props인지 알고 싶다면,

• 만약 그 Component가 특정 시점에서 그 변수를 바꾸어야 한다.
  • ->state
• 그렇지 않다(그 component가 그 변수를 바꾸는 일이 없다=다른 부모 component 등이 그 변수를 바꿔서 다시 준다) 면
  • ->props

일반적으로 fetch(rest aip 등)를 통해 업데이트되는 변수는 state이다.

 

그렇다고 component 안에 props와 state 밖에 없는 건 아니다.

output HTML에 대해 deterministic 하지는 않지만(즉 input data, raw data가 아닌) 중간 연산에 필요한 변수(iterator 등)를 선언할 수 있다.

props

props(properties의 줄임말)은 Component의 configuration(옵션 값)이다. 그 cofiguration의 option들을 선택할 수 있다.

props는 Component에게 전달된 시점에서 immutable(불변) 하다.

 

Component는 자신이 받은 props를 수정할 수 없다. 하지만, 그 자식 Component의 props들을 지정할 수 있다.

(자신의 props를 자식에게 props로 주는 것도 가능하다.)

 

state

state는 Component가 mount 될 때, 기본 값으로 시작한다.

그러고 나서, 시간이 변하거나 사용자 이벤트에 따라 mutate(변화) 한다.

state는 어는 한 시점에서 직렬 화가 능한(serializable) 표현이다. (snapshot을 찍을 수 있다는 의미이다.)

 

여기서 직렬화의 뜻은 다음과 같다.

직렬화(直列化) 또는 시리얼 라이제이션(serialization)은 컴퓨터 과학의 데이터 스토리지 문맥에서 데이터 구조나 오브젝트 상태를 동일하거나 다른 컴퓨터 환경에 전(이를테면 파일이나 메모리 버퍼에서, 또는 네트워크 연결 링크 간 전송)하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정이다.
-https://ko.wikipedia.org/wiki/%EC%A7%81%EB%A0%AC%ED%99%94 (한글 wikiedia)-

Component는 자신만의 state를 내부적으로 관리한다.

따라서, 그 자식 component의 state에 대해서는 손댈 수가 없다. (initial value는 줄 수 있지만)

이것이 우리가 state는 private 하다는 이유이다.

 

차이점을 표로 보자면

	props	state
부모 Component에 의해 변경되는가?	O	X
그 Component 안에서 변경되는가?	X	O
자식 Component 안에서 변경되는가?	O	X

 

하지만 여기서 잘 생각해보면, 부모가 자식에게 props를 변경해서 준다고 했다.

하지만 부모도 자신 안에서 변경할 수 있는 값은 state이다.

(일반 변수를 props로 주면 되지 않냐고 생각할 수 있지만, props로 준다는 것 자체가 output HTML에 대하여 deterministic한 raw data라는 의미인데 그렇가면 반드시 props나 state 형태를 띄어야한다. 여기서는 자신 안에서 변경하고 자식에게 전달하므로 state이다.)

그럼 결국 당연하게도, 부모의 state를 자식의 props로 전달하는 형태가 되는 것이다.

또, 이런 props를 받은 자식 component는 이런 부모의 state를 변경해줘야 할 때가 있다.

그런 경우 setState 또한 같이 props로 넘겨주어 변경한다.

(직접적인 props 변경을 하면 당연히 render-update가 일어나지 않는다. lifecycle에는 props에 관한 내용이 한 글자도 없다!)

 

자식 컴포넌트가 props로 넘겨받은 setState로 부모 컴포넌트의 state를 변경하는데,

왜 "자식  Component 안에서 변경되는가?"가 state는 X인지 다음 포스팅에서 다루겠다.

props vs. state 2 (그리고 this)

이럽 복잡한..

위와 같이 단순한 부모 자식간에도 저런 긴 설명이 붙는데, 만약 형제 관계라면? 만약 먼 친척 관계라면...

결국 최상위 root component를 거쳐(root의 state로) 서로 의사소통을 할것이다.

그럼 수많은 component를 거쳐가는 부가적인 비용은 누가 감당하나.... (이런 상황을 drilling이라고도 부른다.)

 

이 얘긴 나중에 "전역 상태 관리가 필요한 이유"에서 자세히 말하도록 하겠다.

 

참고한 사이트 :

uberVU/react-guide

 

컴포넌트 State – React