react-hook-form & yup

react-hook-form / yup

해당 라이브러리 같은 경우에는 로그인/회원가입과 같은 폼을 구현하여 validation을 검사해야하는 경우에 유용하게 쓸 수 있는 라이브러리입니다.

⭐ React Hook Form : React를 기반으로 한 폼 관리 라이브러리

⭐ yup : 객체 스키마를 기반으로 한 JavaScript 유효성 검사 라이브러리
React Hook Form과 함께 사용하면 폼 필드의 유효성을 간단하게 검사할 수 있습니다.

yarn add react-hook-form

yarn add yup

yarn add @hookform/resolvers yup

각 필드에 대해 register 함수를 사용하여 등록하고 있습니다.
handleSubmit 함수를 통해 폼 제출 시 onSubmit 함수가 호출되며, 입력된 데이터는 콘솔에 출력됩니다.
에러 메시지는 errors 객체를 통해 표시되며, 필드가 비어있을 경우 해당 에러 메시지가 렌더링됩니다.

//Hook.js
import React from "react";
import { useForm } from "react-hook-form";

const Form = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

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

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>아이디</label>
          <input
            type="text"
            {...register("id", **{ required: "아이디를 입력해주세요." }**)}
          />
          {errors.id && <h3>{errors.id.message}</h3>}
        </div>

        <div>
          <label>비밀번호</label>
          <input
            type="password"
            {...register("password", {
              min: { value: 3, message: "3이상 값을 입력해주세요." },
              required: "값을 입력해주세요.",
            })}
          />
          {errors.password && <h3>{errors.password.message}</h3>}
        </div>

        <div>
          <button type="submit">확인</button>
        </div>
      </form>
    </div>
  );
};

export default Form;

각각의 폼 필드는 register 함수를 사용하여 등록되며, 이를 통해 폼 필드의 값을 추적하고 유효성 검사를 수행할 수 있습니다.

register 함수는 각 필드의 이름과 필요에 따라 유효성 검사 규칙을 설정하는 옵션을 받습니다.

• react-hook-form 유효성 검사 제공 기능

  1. required: 필수 필드 여부를 검사합니다.

  2. maxLength 및 minLength: 최대 길이와 최소 길이를 검사합니다.

     1. ex) { maxLength: 10, minLength: 5 }

  3. pattern: 정규식 패턴을 사용하여 필드 값을 검사합니다.

     1. { pattern: /^[A-Za-z]+$/i }

  4. validate: 사용자 정의 유효성 검사 함수를 사용하여 필드를 검사합니다.

     const validateAge = (value) => {
       const age = parseInt(value);
       if (isNaN(age)) {
         return "유효한 나이를 입력하세요.";
       }
       if (age < 18) {
         return "미성년자는 등록할 수 없습니다.";
       }
       return true;
     };
     
     <input {...register("age", { validate: validateAge })} />
     

  5. validate 객체: 여러 개의 유효성 검사 함수를 객체 형태로 정의할 수 있습니다.

     const validateRules = {
       required: "필수 필드입니다.",
       minLength: {
         value: 5,
         message: "최소 5자 이상 입력해주세요.",
       },
     };
     
     <input {...register("fieldName", { validate: validateRules })} />
     

     이외에도 다양한 유효성 검사 기능이 제공

     자세한 내용은 React Hook Form 공식 문서 참조

1. yup 라이브러리를 사용하여 유효성 검사 스키마를 정의합니다. 아이디 필드는 반드시 입력되어야 하며, 비밀번호 필드는 최소 길이를 3으로 설정합니다.
2. useForm 훅을 사용하여 React Hook Form의 필수 구성 요소를 가져옵니다. yupResolver를 사용하여 유효성 검사 규칙을 적용합니다.
3. 폼 필드들을 생성하고 register 함수를 사용하여 각 필드를 등록합니다. ...register("이름") 구문을 사용하여 필드를 등록하고 필요한 속성을 설정합니다.
4. {...register("이름")} 구문을 사용하면 해당 필드를 등록하고, 필요한 유효성 검사 규칙을 적용할 수 있습니다. 에러 메시지는 errors 객체를 통해 표시됩니다.

//YupHook.js
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";**

const YupForm = () => {
  const schema = yup.object().shape({
    id: yup.string().required("아이디를 입력해주세요."), // required 설정
    password: yup
      .min(3, "3이상 값을 입력해주세요.")
      .typeError("값을 입력해주세요."), // 최솟값, 최댓값 설정
  });

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

  const check = (data) => {
    console.log(data);
  };

  return (
    <div>
      <div>
        <label>아이디</label>
        <input type="text" {...register("id")} />
        {errors.id && <h3>{errors.id.message}</h3>}
	      </div>
      <div>
        <label>비밀번호</label>
        <input type="password" {...register("password")} />
        {errors.password && <h3>{errors.password.message}</h3>}
      </div>

      <div>
        <button onClick={handleSubmit(check)}>확인</button>
      </div>
    </div>
  );
};

export default YupForm;

위의 코드처럼 yup 스키마를 정의하고 폼 필드에 적용해야 합니다.

React Hook Form의 register 함수를 사용하여 필드를 등록할 때, validate 속성을 사용하여 해당 필드에 대한 yup 스키마를 적용할 수 있습니다.

이렇게 설정된 유효성 검사는 폼을 제출하기 전에 자동으로 실행되며, 유효하지 않은 경우 에러 메시지가 표시됩니다.

• yup 유효성 검사 메서드