4.1 React 컴포넌트의 상태란?
React의 상태는 컴포넌트의 변경 가능한 데이터 저장소다. 독립적이면서 기능 중심인 UI와 논리의 블록이다. 변경 가능하다는 것은 상태 값을 변경할 수 있다는 것이다. 뷰(render())에서 상태를 이용하고, 이 값을 나중에 변경하면 뷰의 표현에 영향을 줄 수 있다.
빗대어 설명하면 이렇다. 컴포넌트를 속성과 상태가 있는 함수라고 생각하면 이 함수의 결과가 UI 표현(뷰)이다. React 팀에서는 “컴포넌트는 상태 머신(state machine)입니다”라고 말하고 있다. 속성과 상태는 둘 다 뷰를 갱신하기 위해 사용할 수 있지만, 서로 다른 목적으로 사용한다(4.3절 참조).
상태 객체에 접근할 때는 이름을 이용한다. 이름은 this.state 객체의 속성이다. (여기서 말하는 객체 속성이란 객체 키 또는 객체 프로퍼티를 의미하며, 컴포넌트의 속성이 아니다.) 예를 들면 this.state.autocompleMatches 또는 this.state.inputFieldValue 같은 방식이다.
Note
일반적으로 상태 객체라고 하면 컴포넌트의 this.state 객체에 속한 모든 키-값 쌍을 말한다. 상태라고 하면 문맥에 따라서 this.state 객체를 의미하거나 this.state.inputFieldValue처럼 개별 상태 값을 의미할 수도 있다. 반면에 상태 객체라고 하면 거의 항상 하나의 컴포넌트에 속한 상태 객체를 구성하는 여러 개의 키-값 쌍을 의미한다.
상태 데이터는 흔히 뷰의 렌더링이 갱신될 때 동적 정보를 출력하기 위해 사용된다. 자동완성 입력상자 예제로 돌아가서 살펴보면 사용자 입력을 받아 서버에 XHR 요청을 보내고, 돌아온 응답에 따라 상태를 변경한다. React는 뷰에 출력된 상태가 변경되면, 변경된 상태를 뷰에 반영하여 뷰를 최신 상태로 유지한다. 본질적으로 상태를 변경하면 뷰에서 변경한 상태에 관련된 부분만 갱신된다(작게는 하나의 HTML 요소 또는 한 요소의 속성만 변경된다).