변경을 감지하려면 컴포넌트에 이벤트 핸들러를 정의하고(JSX의 {}에 인라인으로 작성할 수도 있다) onChange 속성으로 이벤트 핸들러를 전달해주면 된다. 예를 들어 다음 예제 코드는 이메일 입력 영역의 변경을 감지하는 경우다(ch07/elements/jsx/content.jsx).

 

예제 코드 7.4 폼 요소의 렌더링과 변경 감지하기

handleChange(event) {
    console.log(event.target.value)
}
render() {
    return <input
        type="text"
        onChange={this.handleChange}
        defaultValue="hi@azat.co"/>
}

---

 

흥미로운 점은 onChange를 정의하지 않고 value만 입력하면 React가 경고를 보내고 요소를 읽기 전용으로 만든다는 점이다. 읽기 전용 영역이 필요한 경우라면 명시적으로 readOnly 속성을 추가하는 것이 좋다. 이렇게 하면 경고도 제거할 수 있고, 코드를 보는 다른 개발자도 입력 영역이 읽기 전용으로 설계되었다는 것을 알 수 있다. 값을 명시적으로 설정하려면 readOnly={true}라고 작성하거나, 값 없이 readOnly 속성만 작성해도 React에서 해당 속성의 값을 true로 간주한다.

요소의 변경을 감지하면 컴포넌트 상태에 저장할 수 있다.

handleChange(event) {
  this.setState({emailValue: event.target.value})
}