React Hook Form 간단정리

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

Home

React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다. 아래는 공식홈에 있는 예제코드이다.

예제코드

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 표준을 활용하여 안정적인 기능을 제공한다.
• 종속성이 없어 크기가 작다
• 재렌더링 횟수를 최소화한다.
• 유효성 검사에 유용하다.

 

렌더링 횟수 최소화

• 구성 요소를 즉각 분리하여 같은 컴포넌트 내 요소들의 의미없는 재 렌더링을 막아준다.
• 전체 양식을 재 렌더링하지 않고, 개별 입력 및 양식 상태 업데이트를 구독할 수 있다.

 

API

useForm

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

• input 또는 select의 값들을 관리할 수 있다.
• defaultValues 나 defaultChecked를 통해 초기값을 설정할 수 있다.
• 값을 초기화하려면 useForm의 reset api를 이용할 수 있다.
• HTML표준기반으로 된 검증규칙을 적용할 수 있다.
• 언제 검증을 할 것인지에 관한 트리거를 선택할 수 있다.
• formState api를 이용하여 값이 오염되지는 않았는지 (isDirty), 폼이 정상적으로 송신되었는지 (isSubmitSuccessful) 같은 폼의 상태를 즉각적으로 알 수 있다.

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

 

useController

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

 

useFormContext

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

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > 
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

function NestedInput() {
  const { register } = useFormContext(); 
  return <input {...register("test")} />;

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과 ref를 같이 쓰면 원하는대로 동작하지 않을 수도 있다.
• React Hook Form은 ref 기반이므로, value 속성이 필요하지 않다. (defaultValue를 사용하자)

 

그 외 도움될 만한 링크

https://react-hook-form.com/kr/faqs/

 

재사용 가능한 react-hook-fom 컴포넌트 만들기

https://cheri.tistory.com/276

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