[Legacy][React] react-hook-form - 5 (yup validation)

[React] react-hook-form - 5 (yup validation)

react-hook-form와 함께 사용할 수 있는 validation package들이 있다. 필자는 yup을 많이 사용하고 있어 소개를 해보려고 한다. 자세한 사용법은 해당 사이트에서 확인해보도록 하자. 이동하기

yup validation

validation을 할 수 있는 package는 여러개 있지만 yup validation을 사용하고 있으니 yup validation으로 설명해보겠다. 우선 validation을 하는 이유는 간단하다. 사용자가 개발자의 의도에 맞게 값을 입력하였는가? 를 확인하는 것이다. 만약 잘못된 값이 있으면 error 메세시를 띄워주어 다시 입력하도록 유도할 수 있다. 자세한 yup validation 사용법은 위 홈페이지에서 확인하면 아주 잘 나왔으니 참고하면 될 것 같다. 우리는 간단히 예제를 통해 확인해보도록 하자.

yup validation 코드

import * as yup from "yup";
import { useMemo } from "react";

const errRequired = "필수 값입니다.";
const errNumber = "숫자만 입력할 수 있습니다.";
const errString = "문자만 입력할 수 있습니다.";
const max = {
  number: 100,
  text: 10
};
const min = {
  number: 10,
  text: 3
};

const useSimpleValidation = () => {
  const schema = useMemo(() => {
    return yup.object({
      num: yup
        .number()
        .required(errRequired)
        .typeError(errNumber)
        .test(
          "max",
          `${max.number}보다 작은 숫자 입력해주세요.`,
          val => Number(val) < max.number
        )
        .test(
          "min",
          `${min.number}보다 큰 숫자 입력해주세요.`,
          val => Number(val) > min.number
        ),
      text: yup
        .string()
        .required(errRequired)
        .typeError(errString)
        .test(
          "max",
          `${max.text}자리보다 짧은 문자열을 입력해주세요.`,
          val => val.length < max.text
        )
        .test(
          "min",
          `${min.text}보다 긴 문자열을 입력해주세요.`,
          val => val.length > min.text
        )
    });
  }, []);

  return { schema };
};

export default useSimpleValidation;

딱히 설명할 내용은 없다. num, text 변수가 있는데 숫자, 문자이며 필수값이고 type 확인 및 test를 하여 실패한 경우 error msg를 반환해주는 것이다.

react-hook-form, yup 적용한 코드

import { yupResolver } from "@hookform/resolvers/yup";
import { Controller, useForm } from "react-hook-form";
import useSimpleValidation from "./useSimpleValidation";

const initValue = {
  num: "",
  text: ""
};

const Basic = props => {
  const { schema } = useSimpleValidation();
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({
    mode: "onSubmit",
    defaultValues: initValue,
    // #1 validation 적용
    resolver: yupResolver(schema)
  });

  console.log("### errors", errors);

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <Controller
          name="num"
          control={control}
          render={({ field }) => {
            return <input {...field} />;
          }}
        />
      </div>
      <div>
        <Controller
          name="text"
          control={control}
          render={({ field }) => {
            return <input {...field} />;
          }}
        />
      </div>
      <input type="submit" />
    </form>
  );
};

export default Basic;

#1 validation 적용

useSimpleValidation을 import하여 resolver에 yupResolver 인자값으로 넘겨주면 된다. onSubmit으로 제출할 때 errors가 있으면 반환을 해주고 이후 입력할 때마다 검사를 한다.

 

아주 간단하게 react-hook-form에 yup validation 적용하는 방법을 알아보았다. errors가 있는 경우 사용자들에게 tooltip으로 알림을 주면 더 좋을 것 같다. 이것으로 react-hook-form 게시글 시리즈는 끝이 났고 모두들 즐겁게 코딩하길 바란다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.