대화형 속성을 이용해서 값을 읽거나 변경할 수 있다. 각 요소를 정의하는 방법을 예제를 통해 살펴보자.

 

<input> 요소

<input> 요소는 type 속성에 입력하는 값에 따라 여러 가지 방식의 입력 영역을 렌더링할 수 있다.

• text: 일반적인 텍스트 입력 영역

• password: 보안을 위해 입력 내용이 가려진 텍스트 영역

• radio: 라디오 버튼. 라디오 버튼 그룹을 만들 때는 name 속성에 같은 값을 입력한다.

• checkbox: 체크박스 요소. 체크박스 그룹을 만들 때는 name 속성에 같은 값을 입력한다.

• button: 버튼 폼 요소

 

체크박스와 라디오 버튼을 제외한 모든 <input> 요소의 주요 용도는 요소의 변경 가능한 대화형 속성을 사용하는 것이다. 예를 들어 이메일 입력 영역은 email 상태와 onChange 이벤트 핸들러를 사용한다.

<input
  type="text"
  name="email"
  value={this.state.email}
  onChange={this.handleEmailChange}/>