더북(TheBook)

7.1.1 React에서 폼과 이벤트 정의하기

<form> 요소부터 살펴보자. 일반적으로 입력 요소를 DOM의 아무곳에나 무작위로 두지 않는다. 서로 기능이 다른 여러 개의 입력 요소 집합을 다루는 경우에 잘못될 수 있기 때문이다. 무작위로 두지 않고, input 요소를 공통 목적을 가진 항목끼리 묶어서 <form> 요소로 감싼다.

<form>으로 감싸는 것이 필수적인 것은 아니다. 간단한 UI에서는 폼 요소를 따로 사용해도 괜찮다. 그렇지만 여러 요소의 그룹으로 이뤄진 단일 페이지처럼 복잡한 UI를 다룰 때는 각 그룹을 <form>으로 구분하는 것이 현명한 방법이다. React의 <form>은 HTML의 <form>처럼 렌더링되므로 HTML 폼에 적용할 수 있는 방법은 React의 <form> 요소에도 적용할 수 있다. 예를 들어 HTML5 명세에 의하면 폼은 중첩할 수 없다.1

 

1   명세에 따르면 폼의 내용은 플로우 콘텐츠(flow content)지만 <form> 요소를 자식으로 둘 수 없다. https://www.w3.org/TR/html5/forms.html#the-form-element를 참고하기 바란다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.