defaultValue 대신 value 속성(value="JSX")을 사용하면 이 엘리먼트는 읽기 전용이 되어 버린다. 제어 엘리먼트가 될 뿐만 아니라, 그림 7-14처럼 사용자가 <input> 요소에 입력하더라도 값이 바뀌지 않는다. 이것은 value를 하드코딩했기 때문에 React가 해당 값을 유지하는 것이다. 아마도 여러분이 원하는 결과는 아닐 것이다. 실제 애플리케이션에서 React는 속성을 통해 입력 값을 가져올 것이다(this.props.name).

<input type="text" name="new-book-title" defaultValue={this.props.title}/>

 

▲ 그림 7-14 value에 문자열을 입력하면 <input> 요소의 값을 변경할 수 없다.

 

또는 상태를 이용할 수도 있다.

<input type="text" name="new-book-title" defaultValue={this.state.title}/>

 

React의 defaultValue 기능은 주로 비제어 컴포넌트와 함께 사용한다. 그렇지만 참조를 사용하면 defaultValue를 제어 컴포넌트나 다른 경우에도 사용할 수 있다. 제어 컴포넌트에서는 생성자에서 기본값을 상태로 설정할 수 있으므로 크게 중요하지 않다. 예를 들면 this.state = { defaultName: 'Abe Lincoln'}이라고 작성할 수 있다.

앞서 살펴본 것처럼 대부분의 UI 작업이 편리한 폼 요소를 통해 이뤄진다. 아름다우면서도 이해하고 사용하기 쉽게 만들어야 한다. 사용자 친화적인 오류 메시지, 프론트엔드 유효성 검사, 그 외의 툴 팁, 크기를 변경할 수 있는 라디오 버튼, 기본값, 플레이스홀더 같은 중요한 기능들도 다뤄야 한다. UI를 개발하다 보면 복잡해지고, 금세 통제 불능 상태가 되곤 한다! 다행히도 React는 브라우저 간 차이가 없는 폼 요소 API를 제공하므로 복잡한 UI 개발 작업이 좀 더 쉬워진다.