복잡한 폼을 위한 React Hook Form
date
Jun 25, 2023
slug
react-hook-form
status
Published
tags
React
summary
type
Post
코드 블록이 보이지 않는 경우, 페이지를 새로고침해주세요.
시작하며
프로젝트를 진행하면서, 복잡한 폼을 개발하는 과정에서
______ 에 대한 문제에 직면했습니다.- Props Drilling (중첩된 구조에서 데이터를 전달)
여러 계층의 중첩된 컴포넌트 구조를 가지는 경우가 있습니다. 이러한 구조에서는 상위 컴포넌트로부터 하위 컴포넌트로 데이터를 전달하는 과정이 관리하기 어렵고 코드를 복잡해지는 경향이 있습니다.
- Dependency (의존관계가 있는 폼 상태 관리)
폼 내에는 의존관계의 필드들 있습니다. 한 필드의 값이 변경되면 다른 필드의 상태가 업데이트 됩니다. 이러한 관계는 폼의 상태 관리 로직이 복잡해지는 경향이 있습니다.
이러한 문제를 해결하기 위해
React Hook Form을 도입했습니다.React Hook Form
React Hook Form은 React 기반의 애플리케이션에서 폼 관리를 위한 라이브러리입니다.Provider Pattern
Provider Pattern은 Context API를 기반으로 한 디자인 패턴입니다. 이 패턴은 공통 데이터를 상위 컴포넌트에서 관리하고, 하위 컴포넌트들이 이 데이터에 접근할 수 있도록 합니다.
React Hook Form은
useFormContext 훅을 활용해 Provider Pattern을 구현함으로써, 폼의 상태와 함수를 하위 컴포넌트에게 전달할 수 있습니다. 이 방법은 폼의 데이터와 로직을 중앙에서 관리하며, 각각의 하위 컴포넌트에서 필요한 상태와 함수를 쉽게 접근하고 사용할 수 있게 해줍니다.Uncontrolled Component
비제어 컴포넌트의 경우 필드의 상태를 관리하는 제어 컴포넌트와 다르게 ref를 통해 직접 DOM에 접근합니다. 따라서 필드 값이 변경될 때마다 리렌더링이 발생하지 않습니다.
register 함수를 통해 비제어 컴포넌트를 쉽게 구현할 수 있습니다.useController, Controller
useController 과 Controller 는 MUI 와 같은 UI 라이브러리에서 제공하는 제어 컴포넌트와 쉽게 통합할 수 있게 도와줍니다.useWatch, watch
useWatch 과 watch는 폼 필드의 상태를 감시하고 변경사항을 추적하는 데 사용됩니다.둘의 차이점은
watch는 루트레벨에서 렌더링되고 useWatch는 컴포넌트나 훅레벨에서 렌더링됩니다.
useFieldArray
useFieldArray는 배열 형태의 필드를 관리하기 위한 훅입니다. 이 훅은 사용자가 추가 삭제할 수 있는 동적인 폼 필드 구현할때 유용합니다.field.id는 자동으로 생성됩니다. 리렌더링으로 인해 필드의 오류를 방지하려면 키로 추가해야 합니다.getValues
getValues는 폼의 현재 값을 검색하는 데 사용되는 함수입니다. 이 함수는 폼의 입력 필드에서 사용자가 입력한 데이터를 얻기 위해 사용되며, 특정 필드의 값 또는 전체 폼의 값들을 한 번에 가져올 수 있습니다.그외
yup과 zod와 같은 라이브러리와 통합하여 폼 필드에 대한 유효성 검사와 에러 처리를 효율적으로 관리할 수 있습니다.React나 Tanstack Query와 같은 라이브러리들처럼 문서가 잘 정리되어 있어, 사용자가 필요한 정보를 쉽게 찾을 수 있습니다.
마지막으로 메인테이너가 활발하게 활동하고 있어, Discussions를 통해 커뮤니티 내에서 질문과 답변을 쉽게 확인하고 소통할 수 있습니다
마치며
React Hook Form 라이브러리를 사용함으로써 Props Drilling 문제를 해결하고, 의존관계가 있는 폼 상태 관리를 간소화할 수 있었습니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
