react-hook-form

react-hook-form

폼의 유효성을 검사하는 라이브러리

 

useForm

유효성 검사를 위한 여러 프로퍼티들과 메서드들을 가진 객체를 반환하는 메서드

import { useForm } from "react-hook-form";

const Inputs = () => {
  const formTools = useForm();

  return (<></>)
}

export default Inputs;

console.log(formTools)

1. useForm의 인자에 { mode: "onChange" } 를 넣으면 유효성을 실시간으로 모니터링 한다.

formState

폼 상태에 관한 여러가지 정보들이 들어있는 객체

import { useForm } from "react-hook-form";

const Inputs = () => {
  const { formState } = useForm();

  return (<></>);
};

export default Inputs;

console.dir(formState)

console.log(formState.errors)

1. errors 객체의 초기값은 빈 객체이고, 유효성 검사를 통과하지 못한 필드들이 저장된다

2. errors 객체의 Key에는 register로 등록한 name, 값에는 에러의 타입, 에러 메서지, ref가 객체로 할당된다

3. submit 시, 모든 필드의 유효성 검사가 동시에 진행되고, 유효성 검사를 통과하지 못한 필드들은 errors 객체에 한번에 저장된다

register

폼 필드를 등록하여 해당 필드를 추적하고 유효성을 검사

import { useForm } from "react-hook-form";

const Inputs = () => {
  const formTools = useForm();

  return (
    <form>
      <input
        {...formTools.register("email", {
          required: "필수 값 입니다",
        })}
      />
      <input
        {...formTools.register("password", {
          required: "필수 값 입니다",
          validate: (value) => {
            return value.length > 0 && value.length < 8
              ? "8자 이상 입력해주세요"
              : {};
          }
        })}
      />
      <button>Login</button>
    </form>
  );
};

export default Inputs;

1. register의 2개의 인자 중 첫번째는 필드의 이름으로 설정할 문자열, 두번째는 유효성을 검사할 객체가 온다.

2. required는 해당 필드를 필수 입력 값으로 설정하고, 유효성을 통과하지 못했을 때 errors 객체에 정보가 할당된다.

3. validate는 유효성 검사를 할 함수를 커스텀 할 수 있다. 함수의 첫번째 인자는 현재 필드의 값이고, 두번째 인자는 전체 필드의 값이 담긴 객체이다(watch()). validate는 유효성 검사를 통과하지 못했을때, formSate.erorrs객체에 들어갈 message를 반환해야 한다.

watch

register를 사용한 필드 값을 추적

import { useForm } from "react-hook-form";

const Inputs = () => {
  const formTools = useForm({ mode: "onChange" });

  return (
    <form>
      <input
        {...formTools.register("email", {
          required: "필수 값 입니다",
        })}
      />
      <input
        {...formTools.register("password", {
          required: "필수 값 입니다",
        })}
      />
      <button>Login</button>
    </form>
  );
};

export default Inputs;

console.log(formTools.watch())

watch()의 초기 값은 빈 객체이며, 필드에 값이 들어오기 시작하면 모든 필드를 추적한 객체를 반환한다.

handleSubmit

폼 제출 이벤트를 제어

import { useForm } from "react-hook-form";

const Inputs = () => {
  const formTools = useForm({ mode: "onChange" });

  const submit = {
    onSubmit: (e) => {console.log(e)},
    onError: (e) => {console.log(e)}
  }

  return (
    <form onSubmit={formTools.handleSubmit(submit.onSubmit, submit.onError)}>
      <input
        {...formTools.register("email", {
          required: "필수 값 입니다",
        })}
      />
      <span>{formTools.formState.errors.email?.message}</span>
      <input
        {...formTools.register("password", {
          required: "필수 값 입니다",
        })}
      />
      <span>{formTools.formState.errors.password?.message}</span>
      <input {...formTools.register("checkPassword", {
        validate: (value, allValue) => {
          return value !== allValue.password ? "비밀번호가 일치하지 않습니다" : {};
        }
      })}/>
      <span>{formTools.formState.errors.checkPassword?.message}</span>
      <button>Login</button>
    </form>
  );
};

export default Inputs;

1. form 태그의 onSubmit 속성에 들어가는 함수로, 첫번째 인자는 유효성 검사를 통과했을 때 실행할 함수, 두번째 인자는 formState의 errors 객체에 값이 있을 때 실행되는 함수이다.

2. submit을 실행하면 유효성 검사를 설정한 모든 필드를 검사한 후, errors 객체가 빈 객체인지 아닌지에 따라 실행할 함수를 결정한다.

3. 첫번째 인자로 들어가는 함수의 매개변수는 watch()가 반환 하는 값과 완전히 같은 데이터이다.

4. 두번째 인자로 들어가는 함수의 매개변수는 formState.errors와 완전히 같은 데이터이다.

 

FormProvider

하위 컴포넌트들과 폼 데이터를 공유

import { useForm, FormProvider } from "react-hook-form";
import Email from "./Email";
import Password from "./Password";

const Inputs = () => {
  const formTools = useForm({ mode: "onChange" });

  const submit = {
    onSubmit: (e) => {
      console.log(e);
    },
    onError: (e) => {
      console.log(e);
    },
  };

  return (
    <FormProvider {...formTools}>
      <form onSubmit={formTools.handleSubmit(submit.onSubmit, submit.onError)}>
        <Email />
        <Password />
        <button>Login</button>
      </form>
    </FormProvider>
  );
};

export default Inputs;

import { useFormContext } from "react-hook-form";

const Email = () => {
  const formTools = useFormContext();

  return (
    <input
      {...formTools.register("email", {
        required: "필수 값 입니다",
      })}
    />
  );
};

export default Email;

1. FormProvider로 감싸진 하위 컴포넌트에서 useFormContext로 폼 데이터를 공유한다. 

2. useFormContext()가 반환하는 값은 FormProvider의 {...formTools}다.