props & state
props (properties) 와 state 모두 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
따라서 부모 컴포넌트가 값을 받아온 자식 컴포넌트에서는 받아온 props를 직접 수정 할 수 는 없습니다. 반면에 state는 컴포넌트 내부에서 선언하기 때문에 내부에서 값을 변경할 수 있습니다.
setState()
setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 재렌더링됩니다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타냅니다. 다시 말해 현재 화면에 보이는 것을 말합니다.
setState 호출은 비동기적으로 이뤄집니다. 따라서 setState 호출 직후 새로운 값이 this.state 에 반영되는 것은 아닙니다. (항상 setState 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 setState 에 객체 대신 함수를 전달해야 합니다.)
setState는 이벤트 핸들러 내에서 비동기적입니다. 이로 인해 만약 부모와 자식이 모두 이벤트에서 setState를 호출한다면 자식은 두 번 렌더링하지 않으며, 대신에 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 즉, 모든 컴포넌트가 자신의 이벤트 핸들러에서 setState()를 호출할 때까지 React는 Rerendering을 하지 않고 내부적으로 기다리면서, 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다.
React가 Rerendering하지 않으면서 즉시 this.state를 업데이트하지 않는지에 대한 추가적인 설명이 있습니다. 첫째는, props 와 state 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다. 둘째는, 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문입니다.
