7.1.2 폼 요소 정의하기
HTML의 거의 모든 입력 영역을 네 가지 요소, 즉 <input>, <textarea>, <select>, <option>을 사용해서 구현할 수 있다. React에서는 속성을 변경할 수 없다는 것을 기억하는가? 폼 요소는 사용자가 폼 요소와 상호작용하면서 속성을 변경하므로 특별한 경우다.
React는 변경 가능한 속성인 value, checked, selected를 두어 폼 요소를 특별하게 다루고 있다. 이 특별한, 변경 가능한 속성을 대화형 속성(interactive properties)이라고 부른다.
Note
React DOM은 폼을 만들기 위한 다른 요소로 <keygen>, <datalist>, <fieldset>, <label>도 지원한다. 이런 요소는 value, checked, selected처럼 변경 가능한 속성 값 같은 기능을 가지고 있지는 않다. 각각 대응되는 HTML 태그를 렌더링한다. 따라서 이 책에서는 앞서 언급한 특별한 기능을 가진 네 가지 주요 요소를 중점적으로 다룬다.
변경할 수 있는 대화형 속성은 다음과 같다. 폼 요소에 연결한 onChange 같은 이벤트에서 이 속성을 읽을 수 있다(이에 대해서는 6.1.3절에서 다뤘다).
• value: <input>, <textarea>, <select>에 적용된다.
• checked: <input>에 type="checkbox" 또는 type="radio"인 경우 적용된다.
• selected: <select>와 함께 <option>을 사용할 때 적용된다.