React Hook Form | yup 사용해서 유효성 검사하기

React Hook Form 유효성 검사

✔️ @hookform/resolvers yup 설치

yarn add @hookform/resolvers yup
// or
npm install @hookform/resolvers yup

---

Schema Validation

✔️ schema 설정하기

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

const schema = yup
  .object({
    title: yup
      .string()
      .required("제목을 입력해주세요 😰")
      .min(2, "2자 이상 입력해주세요!"),
    body: yup.string().required("내용을 입력해주세요 😦"),
  })
  .required();

✔️ useForm에 yupResolver로 schema 적용하기

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

const schema = yup
  .object({
    title: yup
      .string()
      .required("제목을 입력해주세요 😰")
      .min(2, "2자 이상 입력해주세요!"),
    body: yup.string().required("내용을 입력해주세요 😦"),
  })
  .required();

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormInputs>({
    resolver: yupResolver(schema),
  });

  const addItem = () => {
    // ...
  };

  return (
    <InputWrap onSubmit={handleSubmit(addItem)}>
      <div className='inputWrap'>
        <div className='input'>
          <input
            type='text'
            placeholder='Todo 제목을 입력해보세요!'
            {...register("title")}
          />
          <p className='message'>{errors.title?.message}</p>
        </div>
        <div className='input'>
          <input
            type='text'
            placeholder='Todo 내용을 입력해보세요!'
            {...register("body")}
          />
          <p className='message'>{errors.body?.message}</p>
        </div>
      </div>
      <input className='button' type='submit' value='등록' />
    </InputWrap>
  );
}

---

yup ??

Yup은 Form validation을 위한 라이브러리이다.

✔️ yup 기본

import * as yup from "yup";

let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});