React Form 성능 개선 여정: useState, memo, 그리고 react-hook-form

React 기반 폼 컴포넌트에서 렌더링 성능 문제 발생 및 해결 과정 공유

useState, 비제어 컴포넌트, React.memo 등 다양한 방법 시도

최종적으로 react-hook-form 도입 결정 및 2부에서 상세 내용 공개 예정

초기 폼 컴포넌트 구조와 문제점

초기 폼 컴포넌트는 useState를 사용하여 폼 상태를 관리했다. 구체적으로 lodash를 활용하여 객체를 복사하고 값을 변경하는 방식으로 구현했다. 따라서 폼 요소가 많아질수록 리렌더링 성능 저하 문제가 발생했다. 결과적으로 유저 경험(UX)에 부정적인 영향을 미쳤다.

상태 분리 및 비제어 컴포넌트의 한계

각 폼 컨트롤별로 상태 분리(colocation)를 시도했지만, 상위 컴포넌트에서 하위 컴포넌트의 상태를 직접 읽어올 수 없는 문제가 발생했다. 비제어 컴포넌트 방식을 통해 렌더링 문제는 해결했지만, 데이터 관리 분산으로 인해 개발 생산성이 저하되었다. 반면, 코드 복잡도는 증가했다.

React.memo와 react-hook-form 선택

React.memo를 사용하여 불필요한 리렌더링을 줄이려 했지만, useContext 사용 시 메모이제이션 효과가 제한적이었다. 따라서 react-hook-form을 최종 선택하여 폼 상태를 단일 출처에서 관리하고, 렌더링 성능을 개선했다. 결과적으로, 코드 관리 용이성을 확보했다.