표시 상태
열림, 포커스, 도움말처럼 화면에만 필요한 상태를 둡니다.
폼 상태는 소유권을 나누면 커져도 흔들리지 않는다
values, errors, touched, isSubmitting을 같은 위치에 몰아넣기보다 변경 주체와 신뢰 경계에 따라 나눕니다.
전환 규칙
필드 변경, blur, reset 같은 이벤트를 한 경로로 모읍니다.
재사용 단위
values, errors, touched를 폼마다 반복하지 않게 캡슐화합니다.
성능과 등록
React Hook Form은 필드 등록과 불필요한 리렌더 감소를 맡깁니다.
폼 상태 경계 검증
Yup, Zod 같은 규칙은 UI 바깥에서 독립적으로 유지합니다.
1
필드 수 확인
상태 이름이 늘어나면 reducer 후보입니다.
2
규칙 분리
검증 함수는 컴포넌트 밖에서 재사용합니다.
3
제출 잠금
중복 제출은 isSubmitting 하나로 막습니다.
4
서버 반영
서버 오류는 필드 오류와 전역 오류로 나눕니다.
rule: local UI state stays local, form transitions live in a hook, trust checks stay server-side
폼 상태가 복잡해지는 신호는 필드 수보다 상태 전환이 흩어지는 순간입니다. 이벤트 이름과 소유권을 먼저 정하면 구조가 단단해집니다.