TIL 01.25

React Hook Form

• 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

useForm

 

 

출처 : https://cheri.tistory.com/262

React Hook Form 간단정리