[260429] TIL

Today I Learned (2026-04-29)

react-hook-form 커스텀 훅

• 청구서 수동 발행 폼을 커스텀 훅으로 분리해 관리하는 방식을 정리했다.
• useForm에 zodResolver, defaultValues, mode: 'onChange'를 함께 설정하면 검증과 초기값 흐름을 한곳에서 관리할 수 있다.
• FormProvider와 useFormContext를 사용하면 하위 입력 컴포넌트는 name만 받아 Controller로 폼 상태에 연결할 수 있어 구조가 단순해진다.

코드 정리

• applyPreset, applyReport처럼 폼 값을 바꾸는 동작을 커스텀 훅 안에 모아 페이지 컴포넌트의 책임을 줄였다.
• Zod schema, 에러 메시지 매핑, 기본 프리셋을 분리해 검증 규칙과 UI 코드를 느슨하게 연결했다.
• TextInputField처럼 반복 입력 컴포넌트를 만들면 필드별로 같은 Controller 코드를 반복하지 않아도 된다.