[React] Form

Form : 사용자에게 입력을 받기위해 사용

두 Form의 역할은 같지만 조금 다르다. 
HTML에서의 Form : Element 내부에 각각의 state가 존재
React에서의 Form : React는 컴포넌트 내부에서 state를 통해 데이터를 관리 

Form은 Controlled Components 는 통제를 받는데
값이 리액트의 통제를 받는 Input Formr Element이다.

HTML에선 자바스크립트로 값에 접근하기가 쉽지 않지만
React에선 Component에 접근하면 모든 값 Controller이 가능하다.
(Class Component 기준 이미지이며, 함수 컴포넌트에선 useState Hook으로 관리 가능하다.)

여러, 단일 모든 입력의 값을 Controllered Component로 사용자의 입력을 직접 제어

// 모든 입력값을 대문자로 변경 
const handleChange = (event) => {
	setValue(event.target.value.toUpperCase()); 
}

Textarea : 여러줄에 걸쳐 긴 텍스트를 입력받기 위한 태그
textarea의 value에 useState를 통해 연결하고,
값이 변경된 경우 handleChange 함수가 변경된 값을
setValue에 담아 업데이트 내용을 Submit 시 넘어가게 해준다.

 

Select : Drop-down 목록을 보여주기 위한 Html 태그 
Select의 value에 useState를 통해 연결하고,
값이 변경된 경우 handleChange 함수가 변경된 값을
setValue에 담아 업데이트 내용을 Submit 해준다.
다중 선택 허용시 multiple={true} 하고 Value에 선택된 값의 배열을 넣어주면 된다. 

 

File Input tag는 읽기전용이라 UnControllered Component 이다. 

하나의 컴포넌트에서 여러개 입력(Multiple Inputs)은 어떻게 처리해야할까? 

각각 useState를 만들어준다. 

자유롭게 입력받을 수 있게 만들려면 Null을 넣으면 된다.