텍스트 입력 영역을 다루는 다음 예제를 살펴보자. React는 컴포넌트의 render()에서 새로운 값을 포함해야 한다. 따라서 엘리먼트의 값을 새 값으로 설정해야 한다. 그렇지만 HTML에서 <input> 영역을 구현하면 React는 항상 상태를 실제 DOM에 동기화되도록 유지한다. 즉, React는 사용자가 값을 바꿀 수 없게 한다. 직접 해보자. 이상하게 느껴질 수 있지만, React 입장에서는 올바른 동작이다.

render() {
  return <input type="text" name="title" value="Mr." />
}

 

이 코드는 상태와 상관없이 항상 같은 뷰이므로 input 영역의 입력 값은 항상 Mr.로 유지된다. 그렇지만 입력 영역은 사용자 입력이나 클릭에 따라 변경되어야 한다. 이 점을 고려할 때 값이 동적으로 변경되어야 한다. 좀 더 나은 방법은 다음과 같이 상태에 따라 입력 값을 갱신하도록 구현하는 것이다.

render() {
  return <input type="text" name="title" value={this.state.title} />
}

 

그렇지만 상태 값은 무엇일까? React는 사용자가 폼 요소에 무언가 작성한다는 것을 알 수 없다. React가 변경을 감지할 수 있도록 onChage에 이벤트 핸들러를 추가해야 한다.

handleChange(event) {
  this.setState({title: event.target.value})
}
render() {
  return <input type="text" name="title" value={this.state.title} onChange={this.
  handleChange.bind(this)}/>
}