React Hook Form

React Hook Form 한국어 Docs
한국어는 v7 버전은 없다. 근데 v7이 사용하기 편하니까 v7을 쓰자.

0. 설치

npm install react-hook-form

1. 간단한 폼으로 시작하기

• register 등록하기
  register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })
• register가 지원하는 validation (required, max-length ...)
• watch 로 등록할대상 찍어보기
• formstate 에러 찾아보기

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

interface IForm {
name: string
password: string
e-mail: string
}

const SimpleForm = () => {
  const { register, watch, formState,handleSubmit } = useForm<IForm>({
    defaultValues: {
  	  e-mail: "@naver.com"
    } 
  });
  const onValid: SubmitHandler<FormValues> = (data) => console.log(data);
  const onError = () => {};
  
return (
  <div>
    //handleSubmit(onValid, onError) :통과/에러발생시 연결하는 callback
    <form onSubmit={handleSubmit(onValid, onError)}>
      
      //1. register : name을 uique하게 등록해야함
      <input 
        {...register("name")} 
        placeholder="wright something"/>
      
      //2. register: validation option 사용
      <input 
        {...register("password",
                          {required: "please input your password"})} 
        placeholder="password" />
      
      //3. register: validation을 pattern(정규식)으로 확인하기
	  <input {...register("e-mail", {
          required: "e-mail required",
          pattern: {
            value: /^[A-Za-z0-9._%+-]+@naver.com$/,
            message: "Only naver.com emails allowed"
          },
        }) />
      // formState errors를 register의 name으로 확인해서 error message return 하기
      <span>{formState.errors?.e-mail?.message}</span>
    </form>
   
  </div>
) 
}

2. Custom Validation

register가 지원하지 않는 custom validation을 체크하는 방법을 알아보자

2.1 handleSubmit - validation

handleSubmit의 callback으로 validation을 체크하기

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

interface IForm {
  password: string
  password2: string
  extraError: string
}

const SimpleForm = () => {
  const { register, watch, formState, setError } = useForm<IForm>({
    defaultValues: {
  	  e-mail: "@naver.com"
    } 
  });
  const onValid: SubmitHandler<FormValues> = (data) => {
    
    // 단일항목 에러발생 시키기
  	if(data.password !== data.password2) {
      //setError로 에러발생시킬 name, message,option을 정의함
    	setError("password2", 
                 {message: "비밀번호가 맞지 않아!" },
                 // 에러발생항목으로 포커스하기
                 {shouldFocus: true})
    } 
    
    // 전체항목 에러발생 시키기
    // 전역에러를 담당할 name을 미리설정해놓고 error를 발생시킴
    setError("extraError", {message: "서버 연결 끊어짐!"})
  
  };
  const onError = () => {};
  
return (
  <div>
    // 전체 에러 
    <span>{formState.errors?.extraError?.message}</span>
    <form onSubmit={handleSubmit(onValid, onError)}>
      <input {...register("password", {required: true})} />
      <input {...register("password2", {required: true})} />
      //단일항목 에러
      <span>{formState.errors?.password2?.message}</span>
    </form>
   
  </div>
) 
}

2.2 register - validation

validate: (value) => boolean | string 옵션으로 에러발생 / 에러메세지를 생성

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

interface IForm {
name: string
}

const SimpleForm = () => {
  const { register, watch,formState, setError,handleSubmit } = useForm<IForm>({
    defaultValues: {
  	  e-mail: "@naver.com"
    } 
  });
  const onValid: SubmitHandler<FormValues> = (data) => {};
  const onError = () => {};
  
return (
  <div>
    <form onSubmit={handleSubmit(onValid, onError)}>
      // 에러메세지 없이 validation을 막기
      <input {...register("name", 
                          {required: true,
                           validate: (value) => !value.includes("kim")
                          })} />
      // 에러메세지를 발생시키기
      <input {...register("name", 
                          {required: true,
                           validate: (value) => !value.includes("kim") ? "김씨는 통과할수 없어" : true
                          })} />
    </form>
   
  </div>
) 
}