깔끔한 폼 개발과 정시퇴근을 위하여 react-hook-form

딜리셔스가 신상스튜디오 내재화 프로젝트에서 회원가입·예약 폼을 만들며 `react-hook-form` 을 도입한 사례다. 이름 하나만 받는 폼에도 상태·검증·에러 메시지·핸들러가 몇 벌씩 필요해지는 과정을 먼저 보이고, 그 반복을 어떻게 걷어내는지로 넘어간다.

핵심 포인트

입력 하나를 관리하는 데도 값 state, 에러 메시지 state, 정합성 판단 함수, onChange 핸들러, submit 함수 다섯 가지가 필요하다.
아이디·이메일·비밀번호·재입력·휴대전화·주소가 붙으면 state 도 핸들러도 에러 메시지도 개수만큼 늘고 submit 로직이 비대해진다.
`register` 함수로 입력값 등록을 단순화하고, `handleSubmit` 이 `preventDefault` 보일러플레이트를 없애며 인자로 폼 값을 직접 넘겨준다.
`react-hook-form` 은 **비제어 컴포넌트**를 활용해 `onSubmit` 시점에 함수가 실행되므로, 타이핑할 때마다 일어나는 리렌더링을 줄인다.
제어 컴포넌트가 아니라 컴포넌트 마운트 속도도 더 빠르다.

상세 정리

hooks 등장 배경을 먼저 짚는다. React 는 0.14 부터 stateless functional component 를, 16.8 부터 hooks 를 제공했다. 무려 4년간 함수형 컴포넌트는 stateless 였다.
클래스 컴포넌트를 두고 hooks 를 낸 이유로 두 가지를 든다. 라이프사이클 메서드에 상태관리와 무관한 로직이 섞여 컴포넌트를 잘게 나누기 어렵고 테스트 난이도가 올라간다는 점, 그리고 `this` 문법이 주는 혼동이다.
hook 호출 규칙도 정리한다. 함수형 컴포넌트 최상위에서 호출해 렌더링마다 호출 순서를 보장하고, 조건문·반복문·중첩 함수 안에서 호출하지 않으며, custom hook 은 일반 함수이되 이름에 `use` 접두사를 붙인다.
프로젝트 배경: 신상스튜디오는 외주로 관리되던 서비스를 자체 관리하도록 내재화해 5월에 배포했고, React SPA 의 CSR 방식이다.
요구사항 ① 회원가입: 이메일·전화번호 등이 설정한 pattern 과 일치하는지 확인하고, 필수 입력·비밀번호 일치 여부에 따른 검증 상태와 안내 문구를 노출해야 한다.
요구사항 ② 촬영 예약: 촬영 제품 수에 따라 입력 폼을 동적으로 생성하고 관리해야 한다.
설명은 v7.27.0 기준임을 명시한다.
문제 제기 방식이 구체적이다. "이름만으로 회원가입" 이라는 최소 가정에서 출발해, 확인해야 할 것 두 가지(값이 적절히 입력됐는가, 위배 시 어떻게 안내할 것인가)로부터 필요한 코드 다섯 가지를 도출한다.
안내 문구도 "이름을 입력해주세요", "이름은 2자 이상 입력해주세요" 처럼 상황별로 갈린다는 점을 함께 보인다.