DOM에 있는 그 외의 다른 부분은 그대로 유지한다. 이것은 가상 DOM(1.1.1절 참조) 덕분인데, 이는 React가 보정(reconciliation) 과정을 통해 변경할 부분을 결정하는 방식이다. 이 덕분에 선언적으로 작성할 수 있는 것이다. 우리는 React가 부리는 마술을 감상하면 된다. 뷰의 변경 순서와 그 방법에 대해서는 5장에서 설명한다.

React 개발자는 상태 객체를 이용해서 새로운 UI를 생성한다. 컴포넌트 속성(this.props)이나, 일반적인 변수(inputValue), 클래스 속성(this.inputValue)으로는 처리할 수 없는데, 이것들을 현재 컴포넌트 내부에서 변경하더라도 뷰를 자동으로 변경할 수 없기 때문이다. 예를 들어 다음 예제는 안티패턴으로, 상태 외의 다른 값을 변경해도 뷰를 갱신할 수 없다는 것을 보여준다.

// 안티패턴: 이런 방식은 피하세요!
let inputValue = 'Texas'
class Autocomplete extends React.Component {
  updateValues() { ---- 사용자 입력에 의해 실행됨
      this.props.inputValue = 'California'
      inputValue = 'California'
      this.inputValue = 'California'
  }
  render() {
      return (
          <div>
              {this.props.inputValue}
              {inputValue}
              {this.inputValue}
          </div>
      )
  }
}