만약 상태 세 가지를 모두 갱신하고 싶다면 setState()에 이 상태에 대한 새로운 값을 명시적으로 전달해야 한다. (this.replaceState() 메서드를 사용하는 코드를 오래된 React 코드에서 여전히 찾아볼 수도 있겠지만, 이 방법은 더 이상 작동하지 않고 지원도 종료되었다.³ 이름에서 알 수 있듯이 이 메서드는 상태 객체에 있는 모든 키-값 쌍을 교체하는 데 사용되었다.)

setState()가 render()를 실행시킨다는 점도 기억해야 한다. 대부분의 경우를 이 방식으로 처리한다. 코드가 외부 데이터에 의존하는 매우 특이한 경우, 다시 렌더링하기 위해 this.forceUpdate()를 호출할 수 있다. 그렇지만 이 방법은 상태가 아닌 외부 데이터에 의존하여 컴포넌트를 불안정하게 만들고, 외부 요소와 강하게 결합되어 좋지 않으므로 피해야 한다.

앞서 언급한 것처럼, this.state를 통해 상태 객체에 접근할 수 있다. 기억하고 있겠지만 JSX에서 값을 출력할 때는 중괄호({})를 사용한다. 그러므로 뷰에서 상태를 노출하려면 render()의 return 문에서 {this.state.NAME}을 사용한다.

React가 부리는 마술은 뷰에 상태 데이터를 사용하고 setState()로 새로운 값을 전달할 때 등장한다. (예를 들어 if/else 문에서 출력하거나 HTML 속성 값 또는 자식 엘리먼트의 속성 값을 사용할 때다.) 짠! React는 필요한 HTML만 갱신한다. 개발자 도구의 콘솔에서 이것을 확인할 수 있다. “Updating …”(갱신 중), “Rendering …”(렌더링 중) 같은 갱신 주기를 확인할 수 있을 것이다. 그리고 가장 대단한 점은 필요한 최소한의 DOM 요소에만 정확하게 영향을 준다는 점이다.