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