// 1. 설치
npm install yup @hookform/resolvers
// or 
yarn add yup @hookform/resolvers


// 2. 선언
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';

const resolver = useYupValidationResolver(validationSchema)
const { handleSubmit, register } = useForm({ resolver })

 

yup를 사용하려면 스키마  즉, 구문 작업과 입력값에 대한 테스트 코드에 대한 정의를 객체 정의를 해야 합니다. 스키마는 yup.object() 함수를 사용하여 정의할 수 있습니다.

 

yup은 typescript를 지원하여 각 필드의 타입을 지정할 수 있고, 메서드의 나열형식으로 간결하고 확장할 수 있게 작성할 수 있습니다. 

 

선언된 데이터 구성 코드의 메서드의 첫 번째(입력 인자가 없는 경우) / 두 번째 인자에 커스텀 에러 메시지를 설정할 수 있습니다. 

required('이름은 필수 요소입니다.'),
min(3, '최솟값은 3입니다.')
matches('/^[0-9]+$/', '나이는 숫자만 입력 가능합니다.')
email('올바른 이메일 주소를 입력해주세요.')
positive('양수만 입력 가능합니다.')

• yup 적용 전

컴포넌트에 필요한 UI 정보와 유효성 검사 관련 코드를 한곳에서 관리

// 스키마 정의
const formArray = [
    {
      name: "name",
      label: "이름",
      type: "text",
      placeholder: "이름을 입력해 주세요.",
      required: {
        value: true,
        message: "필수 입력 항목입니다."
      },
      regex: {
        value: (/^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]{1,30}$/),
        message: "한글, 영어만 입력할 수 있습니다.",
      },
      maxLength: {
        value: 30,
        message: "최대 30자 이내로 작성할 수 있습니다."
     }
    },
    {
      name: "phoneNumber",
      label: "전화번호",
      type: "text",
      placeholder: "전화번호를 입력해 주세요.",
      regex: {
        value: (/^\d{1,11}$/g),
        message: "숫자만 입력할 수 있습니다."
      }, 
       maxLength: {
        value: 11,
        message: "최대 11자 이내로 작성할 수 있습니다."
     }
    },
    {
      name: "email",
      label: "이메일",
      type: "text",
      required: {
        value: true,
        message: "필수 입력 항목입니다."
      },
      placeholder: "이메일 주소를 입력해 주세요.",
      regex: {
        value: (/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g),
        message: "올바른 값을 입력해주세요."
      },
    },
    {
      name: "url",
      label: "관련 URL",
      type: "text",
      placeholder: "URL을 입력하세요."
    },
    {
      name: "message",
      label: "기타 메시지",
      type: "textarea",
      placeholder: "기타 메시지를 입력해 주세요.",
      regex: {
        value: (/^(?=.*[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9!@#$%^&*])(?=.{1,200}$)/),
        message: "올바른 값을 입력해주세요."
      },
      maxLength: {
        value: 200,
        message: "최대 200자 이내로 작성할 수 있습니다."
     }
    },
    {
      name: "attachment",
      label: "Upload",
      type: "attachment"
    }
  ];

• yup 적용 후

컴포넌트에 필요한 ui 정보와 유효성 검사 관련 코드를 분리하여 관리

// 스키마 정의
const schema = yup.object().shape({
  name: yup
    .string()
    .trim()
    .required('필수 입력 항목입니다.')
    .max(30, '최대 30자 이내로 작성할 수 있습니다.')
    .matches(/^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]{1,30}$/, '한글, 영어만 입력할 수 있습니다.'),
  phoneNumber: yup
    .string()
    .trim()
    .test(
      "empty-or-validation",
      '숫자만 입력할 수 있습니다.' as yup.Message<any>,
      (value) => !value || (/^\d{1,11}$/g).test(value)
    )
    .max(11, '최대 11자 이내로 작성할 수 있습니다.'),
  email: yup
    .string()
    .trim()
    .required('필수 입력 항목입니다.')
    .max(30, '최대 30자 이내로 작성할 수 있습니다.')
    .email('올바른 값을 입력해주세요.')
  url: yup
    .string()
    .url('올바른 url 주소를 입력해주세요.'),
message: yup
    .string()
    .trim()
    .max(200, '기타 의견은 최대 200자 이내로 작성할 수 있습니다.')
    .test(
      "empty-or-validation",
      '올바른 값을 입력해주세요.' as yup.Message<any>,
      (value) => !value || (/^(?=.*[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9!@#$%^&*])(?=.{1,200}$)/).test(value)
    )
});

// react-hook-form와 yup 연결
const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<any>({ resolver: yupResolver(schema), mode: "onChange" });

const formArrayData = {
  name: {
    label: "이름",
    type: "text",
    placeholder: "이름을 입력해 주세요.",
  },
  phoneNumber: {
    label: "전화번호",
    type: "text",
    placeholder: "전화번호를 입력해 주세요.",
  },
  email: {
    label: "이메일",
    type: "text",
    placeholder: "이메일 주소를 입력해 주세요.",
  },
  url: {
    label: "관련 URL",
    type: "text",
    placeholder: "URL을 입력하세요."
  },
  message: {
    label: "기타 메시지",
    type: "textarea",
    placeholder: "기타 메시지를 입력해 주세요.",
  },
};