처음 만난 리액트 - 12. Forms

Form 이란?

양식. 텍스트 입력 뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택을 해야 하는 것 모두.

사용자로부터 입력을 받기 위해 사용하는 것

Form

React 폼 : 컴포넌트 내부에서 state를 통해 데이터를 관리

HTML 폼 : 엘리먼트 내부에 각각의 state가 존재

Controlled Components

사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트

리액트가 통제함. -> 컨트롤드 컴포넌트는 그 값이 리액트의 통제를 받는 input form element

위 그림의 왼쪽은 HTML 폼, 오른쪽은 Controlled 컴포넌트이다.

html 폼에서는 각 엘리먼트가 자체적으로 스테이트를 관리한다.

따라서 input, textarea, select 태그가 각각 내부의 스테이트를 갖고 있다.

이렇게 되면 자바스크립트 코드를 통해 각각의 값에 접근하기가 쉽지 않다는 단점이 있다.

 

컨트롤드 컴포넌트에서는 모든 데이터를 state에서 관리한다.

또한 앞에서 배운 것처럼 state의 값을 변경할 때에는 무조건 클래스 컴포넌트에서는 setState 함수,

함수 컴포넌트에서는 useState 함수를 사용한다. (->리액트에서 모든 값을 통제할 수 있는 구조)

 

위의 HTML 폼 코드를 리액트의 Controlled Component로 만든 코드이다.

- input 태그의 value : state에 들어있는 값이 input에 표시됨

- 입력 값이 변경되었을 때 호출되는 onChange : handleChange 함수가 호출되도록 함. HandleChange 함수에서는 setValue 함수를 사용하여 새롭게 변경된 값을 value라는 이름의 state에 저장함.

- event : 이벤트 객체

- event.target : 현재 발생한 이벤트의 타겟

- event.target.value : 해당 타겟의 value 속성의 값

즉, 여기에서의 타겟은 input element가 되며 event.target.value는 input element의 값이 된다.

 

이처럼 컨트롤드 컴포넌트를 사용하면 입력 값이 React 컴포넌트의 state를 통해 관리된다.

즉, 여러 개의 입력 양식의 값을 원하는 대로 조정할 수 있고 입력 양식의 초기 값을 내가 원하는 대로 넣어줄 수도 있으며 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있다.

 

위 예시는 사용자가 입력한 모든 알파벳을 대문자로 변경시켜서 관리하는 코드이다.

handleChange함수로 들어오는 이벤트의 target 값을 toUpperCase함수를 사용하여 모두 대문자로 변경한 뒤에 그 값을 state에 저장하는 것이다.

 

---

여러가지 종류의 Form

Textarea 태그

HTML 방식

 

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

- HTML : 텍스트를 태그가 감싸는 형태로 사용

- React : textarea 태그에 value라는 attribute를 사용하여 텍스트를 표시

React의 Controlled Component 방식. 값을 state를 사용해서 다룬다.

 

select 태그

Drop-down 목록을 보여주기 위한 HTML 태그

(*드롭다운 목록 : 여러가지 옵션 중에서 하나를 선택할 수 있는 기능)

 

HTML 태그 : 옵션 태그를 select 태그가 감싸는 형태로 사용

옵션 태그에서 현재 선택된 옵션의 경우에는 Selected라는 attribute를 갖고 있음

 

React에서는 옵션 태그에 Selected 속성을 사용하지 않고 대신에 Select 태그에 Value라는 어트리뷰트를 사용해서 값을 표시함.

2개이상의 옵션을 다중 선택하고 싶다면 다음과 같은 코드를 추가해주면 된다.

 

File input 태그

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

보통 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용함.

 FileInput 태그는 그 값이 읽기 전용이기 때문에 React에서는 uncontrolled 컴포넌트가 된다.

 

Multiple Inputs

지금까지는 하나의 컴포넌트에서 하나의 입력만을 다뤘는데 만약 하나의 컴포넌트에서 여러 개의 입력을 다루기 위해서는 어떻게 해야 할까?

 

=> 여러 개의 state를 선언하여 각각의 입력에 대해 사용한다.