react-hook-form의 사용법

react-hook-form의 사용법

React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다

 

1. npm 패키지를 사용해 react-hook-form을 install 한다.

npm install react-hook-form

2. 상태관리를 위해 필요한 함수를 불러와 실행한다.

register, handleSubmit, watch, formState

 

주요 키워드

register	입력 요소에 연결하기 위한 함수. 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정
handleSubmit	폼의 제출을 처리하기 위한 함수. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행
watch	특정 폼 필드의 값을 실시간으로 관찰하는 함수
formState	폼의 상태를 나타내는 객체

 

예제 코드

import React from "react"; import { useForm } from "react-hook-form"; const Example = () => {   const { handleSubmit, register, formState: { errors } } = useForm();   const onSubmit = values => console.log(values);   return (     <form onSubmit={handleSubmit(onSubmit)}>       <input         type="email"         {...register("email", {           required: "Required",           pattern: {             value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,             message: "invalid email address"           }         })}       />       {errors.email && errors.email.message}       <input         {...register("username", {           validate: value => value !== "admin" || "Nice try!"         })}       />       {errors.username && errors.username.message}       <button type="submit">Submit</button>     </form>   ); };

 

---

장점

○ 상대적으로 배우기 쉬운 기능이다.

○ html 표준을 활용하여 안정적인 기능을 제공한다.

○ 종속성이 없어서 모듈의 크기가 그리 크지 않다.

○ 구성요소를 즉각 분리하여 같은 컴포넌트 내 요소들의 의미 없는 재렌더링을 제한한다.

○ 전체 양식을 재렌더링하지 않고 개별 입력 및 양식 상태 업데이트를 즉각 반영한다.

○  유효성 검사를 즉각 실행한다.

 

 

 

---

해당 패키지에 포함되어 있는 대표적인 hook

 

 

useForm

React Hook Form에서 가장 주가 되는 요소이며, 폼을 쉽게 관리하기 위한 커스텀훅이다.

• input 또는 select의 값들을 관리할 수 있다.
• defaultValues 나 defaultChecked를 통해 초기값을 설정할 수 있다.
• 값을 초기화하려면 useForm의 reset api를 이용할 수 있다.
• HTML표준기반으로 된 검증규칙을 적용할 수 있다.
• 언제 검증을 할 것인지에 관한 트리거를 선택할 수 있다.
• formState api를 이용하여 값이 오염되지는 않았는지 (isDirty), 폼이 정상적으로 송신되었는지 (isSubmitSuccessful) 같은 폼의 상태를 즉각적으로 알 수 있다.
• React Hook Form과 ref를 같이 쓰면 원하는대로 동작하지 않을 수 있다.
• React Hook Form은 ref 기반으로 정보에 직접 접근이 가능해 value 속성이 필요하지 않다. 

 

useController

재사용성을 목적으로, useForm을 적용시킨 컴포넌트로 뺄 때 유용하다. useForm안에 있는 기능들을 사용할 수있고, 기능명이 다르니 꼭 공식문서를 확인하고 사용하도록 하자!

https://www.react-hook-form.com/api/usecontroller

 

useFormContext

컨텍스트를 prop처럼 통과시키는 것이 불편해지는, 깊이 중첩된 구조에서 사용하는 것을 목적으로 하는 커스텀 훅이다. React.useContext의 Provider처럼 useFormContext는 FormProvider으로 관리할 컴포넌트를 감싸줘야한다.

https://www.react-hook-form.com/api/useformcontext

 

useWatch

useForm에 있는 watch API와 동일한 동작을 한다. 입력값을 감시하고, 어떠한 값을 반환할 수 있다. 입력 값을 렌더링하고, 조건별로 렌더링할 항목을 결정하는 데 유용하다. watch와 useForm은 차이점이 있으니, 필요하다면 공식문서에서 찾아보자.

https://www.react-hook-form.com/api/usewatch

 

useFormState

이름에서 느껴지듯 각 폼의 상태를 나타내는 역할을 한다. @hookform/error-message 패키지를 운영하고있으니, 폼에서 에러을 받으면 에러메세지를 보여주는 것으로 활용할 수 있다.

https://www.react-hook-form.com/api/useformstate/errormessage

 

useFieldArray

개발하다보면 array를 map으로 돌려서 input을 렌더할 때가 많은데, 그 때 활용하는 API이다. id (식별자)가 자동적으로 생성되니 key 값을 지정해줄 때, 유용하게 사용할 수 있다.

https://www.react-hook-form.com/api/usefieldarray

 

참고할 만한 블로그

 

재사용 가능한 react-hook-form 컴포넌트 만들기 (+ typescript, tailwind) — 뜬금없이 개발자

재사용 가능한 react-hook-form 컴포넌트 만들기 (+ typescript, tailwind)

[React Hook Form] react hook form 기본 예시 따라하기