[React 주요 개념] 09. 폼

in HTML

<input>, <textarea>, <select> 같은 폼 엘리먼트는 자체적으로 내부 state를 가진다.

그렇기 때문에 React의 다른 DOM 엘리먼트와는 다르게 동작한다.

위 예제에서 사용자가 폼을 제출하면, 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다.

React에서도 동일한 동작을 원하면 그대로 사용하면 된다.

그러나 대부분의 경우 JS함수로 폼의 제출을 처리하고 사용자가 그 데이터에 접근하도록 하는것이 편리하다.

(cf: 제어 컴포넌트(controlled components))

제어 컴포넌트(Controlled Component)

HTML에서는 폼 엘리먼트가 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 된다.

 

따라서 이를 혼합하여 신뢰 가능한 단일 출처(Single source of truth)를 만들 수 있다.

이런식으로 React에 의해 값이 제어되는 폼 엘리먼트를 "제어 컴포넌트" 라고 한다.

예시

input 폼 앨리먼트에는 this.state.value를 연결해두었고, 모든 변화에 대해 handleChange가 작동하면

this.setState를 통해 state가 변경된다.

따라서 사용자가 입력할 때 보여지는 값으로 state가 업데이트 된다.

 

제어 컴포넌트를 사용하면 input의 값이 항상 React state에 의해 결정된다.

그렇기 때문에 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정 할 수 있다.

textarea 태그

HTML에서 <textarea> 엘리먼트는 텍스트를 자식으로 정의한다.

React에서는 value 어트리뷰트를 통해 구현할 수 있다.

value를 가진 채 생성자에서 초기화를 하므로 일부 텍스트를 가진 채 시작되는 점에 주의한다.

select 태그

HTML에서 <select> 엘리먼트는 드롭다운 목록을 생성한다.

selected 옵션은 초기값을 지정하는 옵션인데,

React에서는 이런 옵션 대신 최상단 select 태그에 value 어트리뷰트를 사용한다.

 

전반적으로 input, textarea, select 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 사용한다.

file input 태그

HTML 에서 <input type="file" /> 엘리먼트는 사용자가 하나 이상의 파일을 자신의 저장소에서 서버로 업로드 하거나 File API를 통해 JS로 조작할 수 있다.

값이 읽기 전용이기 때문에 React에서는 비제어 컴포넌트이다.

 

다중입력 제어하기

여러 input 엘리먼트를 제어해야 할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고

event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해준다.

제어되는 Input Null 값

제어 컴포넌트에 value prop을 지정하면 의도하지 않는 한 사용자가 변경할 수 없다.

value를 설정했는데 계속 수정이 가능하다면 value를 실수로 undefined나 null로 설정했을 수 있다.

첫번째 입력은 잡겨있지만 1초 뒤 입력이 가능해진다.

 

제어 컴포넌트의 대안

데이터를 변경할 수 있는 모든 방법에 대해 이벤트 핸들러를 작성하고

React 컴포넌트를 통해 모든 입력상태를 연결해야하므로 제어 컴포넌트를 사용하는게 때로는 번거로울 수 있다.

(특히 기존 코드베이스를 React로 변경할 때나 React가 아닌 라이브러리와 React 앱을 통합할 때)

이러한 입력 폼을 대체하려면 비제어 컴포넌트 기술을 확인할 수 있다.

비제어 컴포넌트 – React (reactjs.org)