Yup 라이브러리 연동

react-hook-form 에 내장되어 있는 유효성 검사 옵션들을 이용할 수도 있지만, yup 과 같이 유효성 검사를 위해 다양한 기능을 제공하는 라이브러리를 사용할 수도 있다.

yup 을 사용했을 때의 장점은 yup 만의 다양한 기능을 이용할 수 있다는 점도 있지만, 유효성 검사 부분을 따로 하나의 schema 로 뺄 수 있으므로 JSX 코드 부분이 간결해 진다는 점이다.

연동 방법

1. 패키지 설치

npm i yup @hookform/resolvers

yup 라이브러리를 연동하기 위해서는 우선 yup 라이브러리와, 연동에 필요한 yup resolver 를 설치한다.

2. 패키지 가져오기

import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';

3. yupResolver 등록

interface IForm {
  username: string;
  email: string;
  channel: string;
}

const schema = yup.object({
  username: yup.string().required('Username is required'),
  email: yup.string().email('Email format is not valid').required('Email is required'),
  channel: yup.string().required('Channel is required'),
});

function Yup() {
  const { register } = useForm<IForm>({
    defaultValues: {
      username: '',
      email: '',
      channel: '',
    },
    resolver: yupResolver(schema),
  });

  return <></>;
}

유효성 검사를 위한 스키마를 정의하고, yupResolver 에 스키마를 담아서 useForm() 의 props 로 전달해주면 된다.

예시 코드

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

interface IForm {
  username: string;
  email: string;
  channel: string;
}

const schema = yup.object({
  username: yup.string().required('Username is required'),
  email: yup.string().email('Email format is not valid').required('Email is required'),
  channel: yup.string().required('Channel is required'),
});

function Yup() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<IForm>({
    defaultValues: {
      username: '',
      email: '',
      channel: '',
    },
    resolver: yupResolver(schema),
  });

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

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="username">Username</label>
          <input type="text" id="username" {...register('username')} />
          {errors.username && <span>{errors.username.message}</span>}
        </div>
        <div>
          <label htmlFor="email">email</label>
          <input type="email" id="email" {...register('email')} />
          {errors.email && <span>{errors.email.message}</span>}
        </div>
        <div>
          <label htmlFor="channel">channel</label>
          <input type="text" id="channel" {...register('channel')} />
          {errors.channel && <span>{errors.channel.message}</span>}
        </div>

        <button>submit</button>
      </form>

      <DevTool control={control} />
    </div>
  );
}

export default Yup;