Form

Form

: 사용자로부터 입력을 받기 위해 사용

HTML Form

➡️ 사용자가 입력한 값에 접근하고 제어하기엔 어려움

Controlled Components

💡 Controlled Components
: 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 컴포넌트
➡️ 값이 리액트의 통제를 받는 input form element

➡️ 모든 값을 통제할 수 있는 구조 가짐
➡️ 여러개의 입력 양식의 값을 마음대로 제어할 수 있음

ex)

-> 사용작자 입력한 값을 모두 대문자로 처리

여러 종류의 Form

⭐️ Controlled Component로 만드는 방식 ⭐️
1. value라는 attribute를 통해 값 전달
2. 값을 변경할 때는 onChange에서 setValue함수를 사용하여 값 업데이트

💡 textarea
: 여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그

++ HTML

<textarea>
	안녕하세요
</textarea>

++ controlled component

💡 select
: Drop-down 목록을 보여주기 위한 HTML

사과 바나나 포도 멜론

++ HTML

<select>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option selelcted value="grape">포도</option>
  <option value="melon">멜론</option> 
</select>

++ controlled component

++ 옵션을 여러개 선택하고 싶을 때!!

<select multiple={true} value={['B', 'C']}>

💡 File input
: 디바이스의 저장 장치로부터 하나 또는 여러개의 파일을 선택할 수 있게 해주는 HTML 태그

<input type="file" />

➡️ 값이 읽기 전용
➡️ 리액트에서는 uncontrolled componenet -> 값이 리액트의 통젤르 받지 않음

💡 Multiple Inputs
: 하나의 컴포넌트에서 여러개의 입력을 다룰 때
➡️ 여러개의 state를 선언하여 각각의 입력에 대해 사용