더북(TheBook)

7.2 폼을 다루는 다른 방법

 

제어 폼 요소를 사용하는 방법이 가장 좋긴 하다. 그렇지만 이 방법은 직접 변경을 감지하고 상태를 갱신해야 하므로 추가 작업이 필요하다. value, checked, selected 속성 값을 문자열 또는 React의 속성이나 상태를 이용해서 정의해야 React가 요소를 제어할 수 있다.

또한, 폼 요소는 value 속성이 상태나 정적인 값으로 설정되어 있지 않을 때는 React가 제어하지 않아도 된다. 이 장의 앞부분에서 뷰의 DOM 상태와 React의 내부 상태에 차이가 있을 수 있다는 점을 들어 비제어 컴포넌트를 권장하지 않는다고 설명하기도 했지만, 서버에 전달할 간단한 폼을 만들 때는 비제어 컴포넌트가 유용하다. 다시 말해 복잡한 사용자 입력과 조작이 많은 UI 요소를 만드는 경우가 아니라면 비제어 패턴을 사용하는 것을 고려해볼 만하다.

일반적으로 비제어 컴포넌트를 사용하려면 폼에서 제출 이벤트를 정의해야 한다. 보통 버튼에 onClick 이벤트나 폼의 onSubmit 이벤트를 사용한다. 이벤트 핸들러를 추가한 뒤에는 두 가지 방법 중에 선택할 수 있다.

제어 엘리먼트를 사용할 때처럼 변경을 감지하여 상태에 저장하지만, 상태를 value에 사용하지 않고 제출 시에만 사용하는 방식(이것은 결국 제어하지 않는 방식이다.)

변경을 감지하지 않는 방식

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