React 컴포넌트에서 props와 state가 다르다는 것도 알고 무엇이 다른지도 알지만 정확히 어떻게 다른건지는 정확히 모른다. 이번 글에서 어떤 면에서 다른건지 알아보겠다.
React컴포넌트는 props와 state를 활용해 HTML문서를 그린다. props와 state는 render() 함수의 input인 raw data 이다.
공통점
props와 state의 차이에 대해 알기 전에 같은 점부터 짚고 넘어가자.
두 요소의 공통점은 다음과 같다.
- 순수한 자바스크립트 객체이다.
- 값의 변경으로 새로운 렌더링을 유발한다.
- 결정론적(deterministic)이다.
결정론적 알고리즘
결정론적 알고리즘은 예측한 그대로 동작하는 알고리즘을 뜻한다. 동일한 입력에 있어서 언제나 똑같은 결과를 내놓는다. 수학에서의 함수와 유사한 의미를 가진다.
Props
props는 컴포넌트의 초기 설정이다. 상위 컴포넌트로 부터 내려받는 것으로 불변(immutable)하다. 따라서 컴포넌트는 상위 컴포넌트로부터 받은 props를 변경할 수 없다. 그리고 하위 컴포넌트로 필요에 따라 props를 내려줘야 하는 책임을 갖는다.
State
state는 컴포넌트가 마운트되면서 기본값을 갖고 시작한다. 또한 시간, 유저 이벤트에 따른 상태값의 변경을 겪게 된다. 상태값은 특정 시간에 대한 데이터 스냅샷이기도 하다. 컴포넌트는 자신의 상태값을 내부에 관리하고 있으며 이런 특성 때문에 state가 private하다고 볼 수 있다.
