폼

https://ko.reactjs.org/docs/forms.html를 읽고 정리한 글입니다

 

• 제어 컴포넌트 (controlled components) : React에 의해 값이 제어되는 입력 폼 엘리먼트
  • HTML의 Form Element(예 : <input>, <textarea>, <select>)는 일반적으로 사용자의 입력 기반으로 자신의 state 관리 및 업데이트
  • React에서는 일반적으로 변경 가능한 state가 컴포넌트의 state 속성에 유지되며, setState()로 업데이트
  • React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소 결합 가능 ⇒ React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어

// input 태그
<input type="text" value={this.state.value} onChange={this.handleChange} />

// textarea 태그 (일부 텍스트를 가진 채 시작)
<textarea value={this.state.value} onChange={this.handleChange} />

// select 태그 (최상단 select 태그에 value attribute 사용)
<select value={this.state.value} onChange={this.handleChange}>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
</select>

• file input 태그 : 사용자가 하나 이상의 파일을 자신의 장치 저장소에서 서버로 업로드하거나 File API를 통해 JS로 조작 가능
  • 값이 읽기 전용이므로 React에서는 비제어 컴포넌트

<input type="file" />

• Formik : 유효성 검사, 방문한 필드 추적 및 폼 제출 처리 등의 해결책