즉, 체크박스나 라디오 버튼을 사용할 때 각 요소의 value 값은 하드코딩하고 checked를 변경 가능한 속성으로 사용할 수 있다. 이어서 다른 입력 요소를 다루는 방법도 살펴보자.

 

<textarea> 요소

<textarea> 요소는 노트, 블로그 게시글, 코드 조각처럼 장문 입력을 감지하고 보여주기 위해 사용된다. 일반적인 HTML에서 <textarea>는 inner HTML을 사용하여(자식을 말한다) 값을 보여준다.

<textarea>
  With the right pattern, applications...
</textarea>

 

그림 7-5에서 <textarea>의 예를 확인할 수 있다.

▲ 그림 7-5 <textarea> 요소의 정의와 렌더링

 

반면에 React는 value 속성을 사용한다. 이런 관점에서 보면 <textarea>의 자식으로 텍스트를 넣거나 inner HTML로 값을 설정하는 것은 안티패턴이다. React는 <textarea>에 자식이 있는 경우에는 자식으로 입력된 텍스트를 기본값으로 사용한다(기본값에 대해서는 7.2.4절에서 더 자세히 다룬다).

<!-- Anti-pattern: AVOID doing this! -->
<textarea name="description">{this.state.description}</textarea>