React Hook Form, Zod로 Form 관리하기

핵심 내용

• 입력 항목이 많고 다단계로 구성된 복잡한 폼은 임시 저장, 초기값 설정, 조건부 필드 처리까지 겹치며 빠르게 복잡해짐
• React Hook Form, Zod, Jotai를 조합해 타입과 검증, 단계별 상태를 분리하고 전략적으로 관리하는 방식 정리
• 공통 스키마와 단계별 스키마를 분리한 뒤 full 모델로 조합하고, 조건 변경 시 불필요한 값은 초기화
• 단계별 검증과 최종 전체 검증을 함께 두고, 임시 저장값과 현재 단계 관리는 atom으로 처리

적용해볼 점

• discriminatedUnion과 extend로 조건별 폼 구조를 명확히 분리
• step submit 시점에만 draft 저장과 단계 이동을 처리해 흐름 단순화
• 조건 변경 시 reset으로 불필요한 필드 값을 정리해 값 유실과 오염 방지