리액트에서 Form 사용하기 (1)

Controlled Components

<input>, <textarea>, <select> 같은 <form> 안에 들어가는 요소들은 다른 태그들과 달리 사용자 입력에 따라 실시간으로 내용이 변경되는 태그이다. 예를 들어 <input type="text" />, <input type="radio" />는 사용자의 입력과 선택에 따라 value 속성값이 실시간으로 달라진다. 이를 리액트에 적용하면 결국 뷰와 데이터 변경이 동시에 일어나는 특수한 상황이라고 볼 수 있다.

리액트에서는 이를 제어하기 위해서는 Controlled Components와 Uncontrolled Components. 이 두가지 개념을 이해할 필요가 있다. 이번 장에서는 Controlled Components 작성 방식을 집중적으로 알아보겠다.

Controlled Components

Controlled는 <input>, <textarea>, <select> 등의 value 속성값을 state, setState를 사용하여 직접 제어하는 것을 말한다.

<input> 적용 결과

위 코드를 분석해보면, 먼저 <input type="text" /> 영역에 텍스트를 입력할 때마다 this.handleChange가 실행되고, 이는 this.state.value에 바로 반영된다.

반영된 this.state.value는 <input type="text" />의 value 속성값으로 들어가며, 사용자의 입력에 따라 value 속성값은 실시간으로 화면에 적용된다.

마지막으로 전송 버튼을 누르면 this.handleSubmit이 실행되면서 this.state.value 속성값이 알림창에 등장하게 된다. 이러한 특징은 <textarea>, <select> 등에도 똑같이 적용할 수 있다.

<textarea> 적용 결과

<select> 적용 결과

만약 여러 개의 <input>을 다룬다면 name 속성값을 기준으로 변화를 감지하여 적용하면 된다.

복수의 <input> 적용 결과