사내 프로젝트의 호텔 도메인을 운영하면서 공급사에 따라 여러가지 Form 개발을 진행 해 왔습니다. 공급사 별로 새로운 Form을 개발 할 때 마다 상태 관리, Validation Check, 포커스 이동 등 필수적으로 구현해야 하는 로직들이 존재하여 새로 생길때마다 폼에 맞춰 로직을 구현해야 했습니다.
추가적으로 타 도메인을 React로 전환한다면 다양한 입력 폼이 생겨 추가적인 폼 개발을 해야하는 상황이 생기기 때문에 코드의 복잡도가 더 올라가기 전 이번 기회에 폼 관리 라이브러리를 도입하여 사내 프로젝트에 생산성 향상과 성능의 이점을 줄 것이라고 생각하였습니다.
여러가지 폼 관리 라이브러리 중 React-Hook-Form이 유지보수 성과 성능 면에서 타 라이브러리 보다 이점을 보여주고 있어 React-Hook-Form을 폼 관리 라이브러리를 선택하여 개선을 진행하였습니다.
React Hook Form이란 리액트에서 사용하는 폼 라이브러리입니다. React Hook Form은 기본적으로 비제어 컴포넌트 방식으로 구현되어 있어 리렌더링 이슈를 해결해 줍니다.
Provider 내부에 존재하면 Props Drilling 없이 데이터를 공유 받을 수 있어 높은 유연성과 유효성 검사가 가능하다는 것이 큰 장점입니다.
제어 컴포넌트는 React에서 폼 데이터를 컴포넌트의 상태(state)로 관리하는 방식입니다. 제어 컴포넌트에서는 폼 요소의 상태를 컴포넌트 자체에서 관리합니다. 아래는 제어 컴포넌트의 작동 방식입니다.
상태 관리 :
각 폼 요소(예: 입력 필드)는 해당하는 상태 변수(예: name과 email 같은)를 가지고 있습니다. 이 상태는 폼 요소의 값들을 저장합니다.
이벤트 처리 :
사용자가 입력 필드에 타이핑하거나 옵션을 선택하면 onChange 이벤트가 발생합니다. 이 이벤트는 새로운 값을 상태에 업데이트합니다.
바인딩 :
폼 요소의 value 속성은 해당하는 상태와 바인딩됩니다. 예를 들어 value={name}은 name 입력 필드를 name 상태에 바인딩합니다.
비제어 컴포넌트는 DOM이 직접 폼 데이터를 처리하는 방식입니다. 이 컴포넌트는 폼 값 관리를 위해 컴포넌트 상태를 사용하지 않습니다. 작은 규모의 경우에는 더 간단하고 성능이 좋습니다.
상태(state) 미사용 :
비제어 컴포넌트는 컴포넌트의 상태를 사용하지 않습니다. 따라서 상태 변수를 선언하거나 업데이트할 필요가 없습니다.