[React] React Hook Form과 yup을 사용한 유효성 검사

React Hook Form이란?

React에서 form의 유효성검사를 도와주는 라이브러리이다.

React Hook Form 장점

공식문서에 따르면 아래와 같은 장점이 있다.

• 기존의 유효성 검사보다 적은 코드를 사용할 수 있다.
• 불필요한 재렌더링을 제거하고 검증 계산을 최소화하여 마운팅 속도를 높여 성능을 향상 시킨다.
• 패키지의 종속성이 없어서 작은 라이브러리로 가볍다.

React Hook Form과 yup을 같이 사용한 이유

React Hook Form만으로도 충분히 좋은 퍼포먼스를 낼 수 있지만, yup과 같이 사용한다면 인라인으로 작성되는 코드를 분리하여 사용할 수 있어  가독성이 조금 더 좋기 때문에 같이 사용하게 된다는 것을 알게되어 사용하게 되었다.

 

아래는 React Hook Form 공식문서에 나와있는 예제코드이다.

확실히 예전의 email의 상태 값을 받아와서 유효성 검사하는 함수를 구현한 후 작업하는 것보다 짧게 코드를 작성할 수 있다.

하지만, pattern에 여러가지 항목의 유효성을 검사하게 된다면 인라인으로 구현해야하는 만큼 코드가 지저분해질 수 있다. 

  <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}

yup이란?

스키마 유효성 검사를 도와주는 라이브러리이다.

아래의 사용방법의 3번에 있는 yup 코드는 내가 직접구현하면서 작성했던 yup 스키마 생성이다. 직접 유효성 검사를 할 때보다 확실히 가독성이 좋다는 것을 알 수 있다.

사용방법

아래와 같은 순서로 코드를 작성해서 회원가입 form 유효성 검사를 간단하게 할 수 있었다. 
자세한 내용은 공식문서에 잘 나와 있기 때문에 확인해가며 작성을 한다면 어렵지 않게 유효성 검사를 할 수 있다.

1. 패키지 설치

npm install react-hook-form yup @hookform/resolvers

2. 라이브러리 import

import { useForm, SubmitHandler } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

3. yup 스키마 생성

const schema = yup.object().shape({
  id: yup
    .string()
    // 최소 글자수 지정
    .min(2, "아이디는 최소 2글자 이상입니다.")
    .matches(
      /^[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+$/,
      "아이디는 영문으로만 입력할 수 있습니다."
    )
    .required("아이디는 필수입력 사항입니다."),
  // 이메일 유효성 검사 코드
  email: yup
    .string()
    .email("이메일 형식을 맞춰주세요.")
    .required("이메일을 입력해주세요."),
  password: yup
    .string()
    .min(8, "비밀번호는 8글자 이상입니다..")
    // 최대 글자수 지정
    .max(16, "비밀번호는 16글자 이하입니다.")
    .matches(
      /^(?=.*[a-zA-Z])((?=.*\d)(?=.*\W))/,
      "비밀번호는 영문, 숫자, 특수문자가 포함되어야 합니다."
    )
    // 반드시 입력해야 할 경우 나타날 수 있도록 하는 코드
    .required("비밀번호는 8글자 이상 16글자 이하입니다."),
  confirmPassword: yup
    .string()
    // yup에 작성한 password와 일치여부 확인
    .oneOf([yup.ref("password"), null], "비밀번호가 일치하지 않습니다."),
});

4. React Hook Form을 사용한 Form 구성

const Signup = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>({ resolver: yupResolver(schema), mode: "onChange" });
  // mode: "onChange"를 입력해야 Input에 입력할 때마다 검증해준다.

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  return (
    <form id="signup" onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="userId">아이디</label>
      <input
        id="userId"
        type="text"
        placeholder="아이디를 입력해주세요"
        {...register("id")}
      />
      {errors.id && <span>{errors.id.message}</span>}
      <label htmlFor="email">이메일</label>
      <input
        type="email"
        id="email"
        placeholder="example@example.com"
        {...register("email")}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <label htmlFor="password">비밀번호</label>
      <input
        type="password"
        id="password"
        placeholder="비밀번호를 입력해주세요"
        {...register("password")}
      />
      {errors.password && <span>{errors.password.message}</span>}
      <label htmlFor="confrimPassword">비밀번호 확인</label>
      <input
        type="password"
        id="confrimPassword"
        placeholder="비밀번호를 입력해주세요"
        {...register("confirmPassword")}
      />
      {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
      <button type="submit">회원가입</button>
    </form>
  );
};

참고자료

React Hook Form 공식문서

Home

yup 공식문서

yup