React hook form

---

해당 포스트는 React hook form의 공식문서를 참고하여 작성했습니다.

React hook form : Get Started

React hook form의 목적

1. form DOM의 유효성 검사를 더 편리하게 한다.
2. form 데이터를 통해 필드를 만들고 스키마를 만들어서 DB에 저장하는 것이 더욱 손쉽다.
3. 유효성 검사에서 에러 처리가 가능하다.
4. form 입력값에 제한을 두는 것을 더욱 간편하게 도와준다.

field 등록하기

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

  const { register, handleSubmit } = useForm();

1. useForm()이라는 전역변수를 통해서 hook form을 사용할 수가 있고 register를 통해서 hook을 걸 수 있다.
2. 이렇게 필드 이름으로 hook을 걸면 폼에 적힌 데이터를 가져올 수 있다.
3. hook을 걸 때는 register를 전개구문으로 걸어주어야 한다.
4. handleSubmit는 말 그대로 submit를 관리한다.

  const onSubmit = data => console.log(data);

1. onSubmit를 통해서 submit라는 type을 통해서 submit를 하면 해당 form의 데이터가 onSubmit를 통해서 가져오게 된다.

apply validation

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

1. 이렇게 html에서 바로 validation을 할 수가 있다.

2. List of validation rules supported:
   
   required
   
   min
   
   max
   
   minLength
   
   maxLength
   
   pattern
   
   validate

3. 지원하는 속성은 이러하다.

schema validation

npm install @hookform/resolvers yup

1. 먼저 프로젝트에 resolvers를 Install한다.

2. const schema = yup.object({
     firstName: yup.string().required(),
     age: yup.number().positive().integer().required(),
   }).required();

3. 이게 react hook form의 궁극적인 장점이라고 생각한다.

4. schema를 만들어서 validation을 전역변수로 걸어줄 수 있다.

5. 또한 DB에 form data가 들어가기 전, DB와 흡사한 validation을 거치고 나서 INSERT가 되는 것이기 때문에 효율성은 더욱 높아진다.

6. 이미 react에서 validation을 거치면서 동적인 validation을 할 수 있다는 점이 큰 장점이라고 생각한다.

react hook form을 더욱 효율적으로 사용하기

  const {
    register,
    handleSubmit,
    reset,
    watch,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

1. react hook form에서 사용하는 변수들은 모두 전역변수로 걸어주도록 한다.

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

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}
      
      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}
      
      <input type="submit" />
    </form>
  );
}

1. formState: 를 통해서 errors object를 사용할 수 있다.
2. errors type은 form의 제약 조건(required)을 return하게 된다.
3. 따라서 required massege를 return하여 동적으로 메시지를 보여줄 수 있는 것이다.
4. 이렇게 되면 더욱 빠르게 사용자에게 validation check가 가능해진다.

Official Tutorial Vedio