새 배송지 추가 Form 개발하기

올리브영 온라인몰의 새 배송지 추가 화면은 단순 텍스트 입력부터 외부 지도 API 연동, 복합 UI까지 포함된 복잡한 Form 영역이다. 개발자는 입력 데이터의 유효성 검사와 안정적인 API 제출을 보장해야 하는 과제를 안고 있다.

효율적인 구현을 위해 세 가지 실험을 진행했다.

• 실험 1 (useState): 각 입력 필드를 개별 상태로 관리하는 방식이다. 구현은 간단하지만, 입력 시마다 컴포넌트 전체가 재렌더링되어 성능 저하가 발생할 수 있다.
• 실험 2 (Context API): Props Drilling 문제를 해결하기 위해 Context를 사용해 상태를 공유한다. 하지만 여전히 상태 변경 시 불필요한 렌더링 문제는 남는다.

결과적으로 복잡한 폼의 상태 관리와 성능 문제를 동시에 해결하기 위해 React Hook Form 라이브러리를 도입하여 최적화된 폼 영역을 개발했다.