서비스 개발 시 폼 관리는 항상 중요한 측면 중 하나이다. 사용자 입력을 받고, 유효성을 검사하며, 제출되는 데이터를 처리하는 등의 작업을 수행해야 한다. 이러한 작업들은 복잡성과 함께 코드의 가독성과 유지보수성을 낮추는 요소가 될 수 있는데 React Hook Form을 도입하면 이러한 문제들을 해결할 수 있을 것이라고 생각했다.
React Hook Form + yup 의 조합으로 사내 프로젝트의 폼을 개선하면서 이번 글에서는 React Hook Form이 폼관리에서 해결해준 문제와 그 장점에 대해 정리해보려고 한다.
기존 폼 관리 방법
1. 폼 안의 각각의 Input 의 상태를 useState로 관리하고 onChange 이벤트를 통해 입력 이벤트를 감지
2. 폼 안의 각각의 Input 에 ref로 DOM 에 직접 접근 가능하도록 하여 ref변수.current.value로 Input value를 감지
React-hook-form 도입 이유
1. 유연한 상태 관리
React Hook Form은 상태를 쉽게 관리할 수 있도록 해준다. 기존의 상태 관리 라이브러리에 의존하지 않고도, 간단하게 React의 상태만으로도 폼을 관리할 수 있는데, 이는 코드의 복잡성을 줄여주고, 상태 관리에 대한 부담을 덜어준다.
2. 최적화된 렌더링
React Hook Form은 최적화된 렌더링을 지원한다. 컴포넌트의 렌더링이 필요할 때만 발생하므로, 성능을 향상시키고 불필요한 렌더링을 방지할 수 있다. 이는 대규모 애플리케이션에서 특히 중요한데, 렌더링 성능을 향상시키는데 도움이 된다.
3. 간편한 유효성 검사
React Hook Form은 간단하고 강력한 유효성 검사 기능을 제공한다. 내장된 유효성 검사 규칙을 활용하거나 사용자 정의 규칙을 만들어 쉽게 적용할 수 있다. 이를 통해 사용자 입력 데이터의 유효성을 검사하고, 에러 메시지를 표시하는 등의 작업을 간편하게 처리할 수 있다.
React Hook Form 자체에서도 간편하게 유효성 검사를 할 수 있지만 사내에서는 yup이라는 라이브러리를 활용하였다.
4. 간편한 사용법
마지막으로, React Hook Form은 간편한 사용법을 제공한다. 직관적인 API를 통해 쉽게 폼을 생성하고 관리할 수 있다. 또한, 자세한 문서와 다양한 예제들이 제공되어 있어 쉽게 익힐 수 있다.