This banner made by here
본 글은 아래 링크 내용을 번역한 글입니다.
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
(오역 및 오타 지적 언제든지 대환영입니다!!)
Props와 State의 정확한 차이점이란?
context에서 props와 state 작동을 이해하는 것은 쉽다. 하지만 그 개념을 이해하는 꽤 어렵다. 처음에 props와 state는 굉장히 추상적이고 비슷해보여서 헷갈릴 수 있는데, 이 둘은 굉장히 다른 역할을 가지고 있다.
Context
컴포넌트의 주요 역할은 raw data를 rich HTML(--이미지, 클릭할 수 있는 버튼, 다른 디자인 등을 포함한 HTML을 말함--)로 바꿔주는 것이다. 이 개념을 가지고 보면, props와 state 둘 다 HTML 결과물을 만드는 raw data를 구성한다는 것을 알 수 있다.
props+state는 컴포넌트의 render()함수를 위한 입력 데이터라고 볼 수 있다. 따라서 어떤 각각의 데이터 타입으로 구성되어 있는지, 그리고 이들은 어디서 오는지 살펴볼 필요가 있다.
props가 최초 state를 가지고 있는 Cosmos(testing UI Components) 사용을 위해서라도 이 개념을 꼭 알아야한다.
공통점
props와 state를 따로 보기 전에 먼저 공통점에 대해 알아보자.
- 순수 자바스크립트 객체이다.
- render 업데이트를 조작할 수 있다.
- 데이터가 고정되어있다.(갑자기 변하거나 하지 않는다는 의미인듯) (같은 props와 state 조합으로 다른 결과물이 나온다면 뭔가 잘못된 것이다.)
차이점
한 줄 요약: component가 하나의 속성(attribute)을 대신해야할 때, 속성은 state의 일부분이어야 한다. state의 일부분이 아니면 해당 component를 위한 props이다.
props
properties의 약자이다.
props는 Conponent에 전달되는 요소의 배열(마치 함수에 전달되는 argument처럼)이며, 옵션사항이다(필수가 아니라는 뜻). props는 부모에게서 전달받는 것이며 컴포넌트가 연관되어 있는 한 절대 변하지 않는다.
Component는 Component의 props를 수정할 수 없다. 그러나 자식 Components의 props를 모을 수는 있다.
state
state는 Component가 마운트할 때(마운트: DOM객체가 생성되고 브라우저에 나타나는 것) 기본값으로 시작하고, 시간이 지남에 따라 변화한다(변화는 대부분 사용자 이벤트에서 생성됨). 한 시점을(스냅샷처럼) serializable하게 표현하는 것이다.
(serializable의 의미는 이해가 안가서 추후에 보충할 예정)
- Component의 state가 반드시 serializable 할 필요는 없고 선택 사항이다.
하나의 Component는 내부적으로 자신의 state를 관리한다. 초기 상태를 설정하는 것 이외에 자식의 state를 수정하지는 않는다. state는 private하다고 할 수 있다.
*props가 serializable하다고 표현하지는 않는다. props는 콜백함수를 통해 전달되기 때문이다.
props와 state 수정
| props | state | |
|---|---|---|
| 부모 Component로부터 초기 value를 가지고 올 수 있는가? | Yes | Yes |
| 부모 Component에 의해 수정될 수 있는가? | Yes | No |
| Component 내부에서 기본 value를 설정할 수 있는가? | Yes | Yes |
| Component 내부를 바꿀 수 있는가? | No | Yes |
| 자식 Component를 위한 초기 value를 설정할 수 있는가? | Yes | Yes |
| 자식 Component 안에서 수정 가능한가? | Yes | No |
- 참고: props와 state 모두 부모로부터 받은 초기 value는 Component 안에서 정의된 기본 value를 덮어쓴다(즉, 부모로부터 받아온 거를 상속 받아 쓸 수 있다)
Component는 state를 꼭 가져야하는가?
state는 옵션이다. state의 복잡성이 커지고 예측성이 감소함에 따라, state없는 Component가 선호된다. state가 없이 상호작용적인 app는 만들 수 없지만 너무 많은 state를 가지는 것을 지양해야한다.
Componnent types
Stateless Component
props만 있고 state는 없는 것. render()에서 진행되는 것이 딱히 없고 모든 로직은 받는 props를 중심으로 진행된다. 이 방법은 따라하거나 또는 테스트하기 굉장히 쉽다. 주로 이것을 '쓸모없는 Component'라고 부른다.
Stateful Component
props state 모두 있는 것. state 매니저라고 불린다. 그들은 클라이언트 서버 소통(XHR, web socket 등), 데이터 프로세싱과 사용자 이벤트 반응을 담당한다. 이 로직들은 안정적인 Stateful Component에 캡슐화(암호화 비슷...)되어져야한다. 동시에, 모든 시각화와 로직 형식은 위에서 아래로, 가능한 한 많은 Stateless Components로 이동해야한다.
props와 state 개념을 머리로는 이해하고 있지만 막상 누군가에게 설명하라고 하면
뭐라고 해야할지 모를만큼 개념이 많이 잡혀있지 않아
react 공식 문서에 메모되어 있는 유명글(?)을 번역해봤다.
하지만 엄청 와닿지는 않아서 이 링크와 함께 있는 Lucy님의 블로그 설명 글도 조만간 번역해서 함께 읽어봐야할 것 같다.
<함께 읽으면 좋은 글>
리액트 공식 문서 state
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
