7.2.1 비제어 엘리먼트에서 변경 감지하기

앞서 살펴본 것처럼 React에서 비제어 컴포넌트는 value 속성을 React에서 설정하지 않는 것을 의미한다. 이 경우 컴포넌트의 내부 값 또는 상태가 컴포넌트의 표현 또는 뷰와 서로 다를 수 있다. 컴포넌트 상태는 유효성 검사 같은 논리를 가질 수 있다. 비제어 컴포넌트를 사용하는 경우에는 사용자가 폼 요소에 무엇이든 입력할 수 있으므로 뷰와 상태 사이에 차이가 발생한다.

예를 들어 다음 텍스트 입력 영역은 React에서 value를 설정하지 않았으므로 비제어 컴포넌트다.

render() {
  return <input type="text" />
}

 

사용자 입력이 즉시 뷰에 렌더링된다. 이것이 좋은 것일까, 나쁜 것일까? 지금부터 이 점을 함께 살펴보자.

비제어 컴포넌트에서 변경을 감지하려면 onChange를 사용한다. 예를 들어 그림 7-10의 입력 영역은 onChange 이벤트 핸들러인 this.handleChange와 textbook에 대한 참조, 입력 영역이 비어 있을 때 회색으로 노출할 placeholder를 속성으로 가지고 있다.