처음 만난 리액트 문서
11.1 폼이란 무엇인가?
form은 우리 말로 하면 양식이라는 뜻을 갖고 있습니다. 우리가 웹사이트를 탐색하다보면 아래 그림과 같이 정보를 입력하는 양식을 종종 볼 수 있습니다.
보통은 회원가입을 하거나 로그인을 할 때 이렇게 텍스트를 입력하는 양식들을 많이 볼 수 있는데, 텍스트 입력 뿐만 아니라 CheckBox나 Select 등 사용자가 뭔가 선택을 해야하는 것 모두 다 form이라고 보면 됩니다. 그래서 form은 사용자로부터 입력을 받기 위해 사용하는 것이라고 보면 됩니다.
리액트에서의 form과 HTML에서의 form은 조금 차이가 있습니다. 우리가 앞에서 배운 것처럼 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리합니다. 반면에 HTML form은 각 element의 내부에 각각의 state가 존재합니다. 아래 예시 코드를 한 번 보도록 하겠습니다.
<form>
<label>
이름:
<input type="text" name="name" />
</label>
<button type="submit">제출</button>
</form>
이 코드는 기본적인 HTML form입니다. 사용자의 이름을 입력받고, 제출을 하는 아주 간단한 코드입니다. 이 코드는 리액트에서도 잘 작동하지만, 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기에는 불편한 구조입니다. 자바스크립트 코드에서 사용자가 입력한 값에 접근하고 제어 할 수 있어야 웹페이지를 개발할 때 더 편리하겠죠?
그래서 이번 장에서는 사용자가 입력한 값에 접근하고 제어 할 수 있도록 하는 Controlled Components에 대해서 배워보고, 이후에 여러가지 종류의 form에 대해서 배워보도록 하겠습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page