새 배송지 추가 form 개발하기

Context

React에서 form을 개발할 때 여러 입력 필드의 상태를 관리하면서 입력이 발생할 때마다 불필요한 재렌더링이 발생하는 문제가 있었다. useState로 개별 상태를 관리할 경우 코드 복잡도가 증가하고, Context API 사용 시에도 여전히 매번 상태 업데이트로 인한 렌더링이 발생하며, useRef 사용 시 nested component에서 ref 등록 문제가 발생했다.

Technical Solution

• useState 기반 상태 관리: 배송지명, 받으실 분, 휴대폰 번호 등 각 필드를 개별 state로 정의하고 onChange 이벤트마다 상태 업데이트
• Context API 도입: AddressContext를 통해 최상위 Form 컴포넌트에서 상태를 관리하고 하위 컴포넌트들이 props 없이 직접 접근 가능하도록 구조화
• useRef 기반 최적화: DOM 요소에 직접 접근하여 상태 업데이트 없이 form 제출 시점에 값을 추출
• React Hook Form 최종 도입: uncontrolled component 방식으로 필드 값을 효율적으로 관리하고 FormProvider를 통해 nested component에서도 손쉽게 필드 등록
• 라이브러리 비교 검증: Formik과 React Hook Form을 동일 조건에서 테스트하여 렌더링 효율성 비교 평가

Key Takeaway

React form 개발 시 입력값이 자주 변경되는 상황에서는 상태 업데이트에 따른 렌더링 오버헤드를 고려하여 라이브러리 선택이 중요하며, React Hook Form은 uncontrolled component 패턴으로 불필요한 재렌더링을 원천적으로 제거할 수 있다.