Form과 Controlled Component

 

Forms

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

 

React에서의 Form vs. HTML의 Form

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

HTML = 엘리먼트 내부에 각각의 state가 존재함

 

Controlled Components

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

누군가의 통제를 받는 컴포넌트 -> 누군가 = React

=> 값이 리액트의 통제를 받는 input Form Element

 

리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음

-> 입력 양식의 초기 값을 내가 원하는 대로 넣어줄 수도 있으며 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있다는 것

 

HTML Form 은 자체적으로 state를 관리함

Controlled Compoenet는 모든 데이터를 state에서 관리함

 

 

다양한 Forms

1) Textarea 태그

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

<textarea>

안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.

</textarea>

-> textarea 태그의 children으로 텍스트가 들어가는 형태

 

But,

React에서는

teaxtarea 태그에 value라는 attribute를 사용하여 텍스트를 표시함

 

2) select 태그

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

여러가지 옵션 중에서 하나를 선택할 수 있는 기능을 제공

 

HTML select 태그

: html에서는 옵션태그를 select 태그가 감싸는 형태로 사용

현재 선택된 옵션의 경우 : selected라는 attribute을 갖고 있음

 

React select 채그

: 옵션태그에 selected 속성을 사용하지 않고 대신에 select 태그에 value 라는 attribute을 사용해서 값을 표시함

 

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

-> 여러 개의 옵션 선택 가능

 

값을 변경할 때

: onChange에서 setValue 함수를 사용하여 값을 업데이트함

 

3) File Input 태그

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

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

 

HTML file input 태그 -> Uncontrolled Component

<input type = "file" />

-> 값이 React의 통제를 받지 않는다는 것

 

 

Multiple Input

: 여러 개의 state를 선언하여 각각의 입력에 대해 사용

 

클래스 컴포넌트

-> setState 함수 하나로 모든 state의 값을 업데이트

vs.

함수 컴포넌트

-> 각 state의 변수마다 set함수가 따로 존재하기 때문에 각각의 set함수를 사용해서 구현

 

 

Input Null Value

: 제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력 값을 바꿀 수 없음

if, value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶다면 값에 undefined 또는 null을 넣어주면 됨