프론트엔드
새 배송지 추가 form 개발하기
두줄요약
배송지 추가 form을 만들며 상태, Context, ref, React Hook Form을 비교했습니다. 최종적으로 재렌더링과 관리 복잡도를 줄이기 위해 React Hook Form을 선택했습니다.
핵심 내용
- 배송지 추가 form 개발 과정에서 상태 관리, Context, useRef, React Hook Form을 순차적으로 비교
- 상태와 Context는 입력마다 재렌더링과 props 전달 부담이 있었고, useRef는 불필요한 렌더링을 줄이며 DOM 접근과 포커스 제어에 유리
- React Hook Form은 register와 handleSubmit으로 입력값 관리와 유효성 검사를 간소화하고, 복합 입력은 FormProvider로 보완
- 최종적으로 복잡한 form에 React Hook Form을 적용해 관리 복잡도와 개발 만족도를 개선