[React] React-hook-form + yup 을 활용한 유효성검사와 회원가입 폼 관리

 

회원가입 폼을 만들면 다양한 정보를 입력받는 여러 input들이 있다.

 

회원가입폼에 필요한 것들을 정리해보자면

 

👉 입력 필드들의 상태를 관리하기위한 변수

👉 유효성 검사를 하기 위한 함수와 만족 여부를 확인하기 위한 변수

👉 에러 메시지를 띄우기 위한 메시지 변수

 

정말 여러 가지들이 들어가야하기 때문에 굉장히 비슷한 성질의 여러 코드가 들어가게된다.

 

너무 길어지는 코드에 좋은 방법이 없을까 하다가 지피티님이 방법을 추천해주셨다.

 

 React-hook-form + yup 을 활용한 폼 

 

 

 

❓ React-hook-form 이란

유효성 검사를 쉽게 할 수 있는 리액트의 라이브러리로써 폼을 유연하고 쉽게 구현이 가능하도록 지원해준다.

유효성 검사는 물론 상태관리와 에러 메시지 까지 한꺼번에 관리할 수 있다.

 

물론 form 안에 있는 필드 한정이다.

 

❓ yup 이란

스키마를 정의하여 데이터의 유효성을 검증할 수 있도록 해주는 라이브러리이다.

 

 

 

따라서 yup에서 정의한 유효성 검증을 담은 스키마를 기반으로
React-hook-form에서 해당 폼 내부에 필드에 적용을 시키는것이다.

 

 

 

---

 

🔍 적용해보기

 

⬛ React-hook-form 

우선 라이브러리를 설치해준다.

나는 yarn을 사용하기 때문에

 

yarn add react-hook-form

해준다.

 

 

◾ react-hook-form 정의

 const {
    register,
    watch,
    handleSubmit,
    trigger, 
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    mode: "onBlur",
  });​

useForm 속성 정리

👉 register
폼 필드와 리액트 훅 폼을 연결해준다. 
register("필드이름") 을 해당 폼 필드에 붙여주면 필드의 값과 상태관리를 할 수 있게된다 => 자동 useState

👉 watch 
폼 필드의 값을 실시간으로 감시하는 함수이며
실시간으로 계속 바뀌는 필드들을 중간에 값을 체크하고싶을때 watch("필드이름") 해주게 되면 최신값을 얻는다.

 

👉 handleSubmit
폼 제출 할 시 호출할 함수이다.
react-hook-form을 사용하면 자동으로 form안에 버튼이 type = submit을 가지게된다.
이때 호출한 함수는 폼 내에 필드들을 전부 유효성 검사를 한 뒤 실패한 필드가 있는 경우  submit이 넘어가지 않도록한다.

👉 trigger
특정 필드나 전체를 강제로 유효성 검사를 수행하는 함수
만약 이메일 중복 검사를 하기전에 이메일만 유효성 검증을 따로 하고 싶을 경우
trigger("email") 하게 되면 이메일만 유효성 검증을 할 수 있게된다.

👉  setValue
 특정 이벤트에 따라 값 변경이 필요할 때 사용한다.
폼필드가 아닌 외부 컴포넌트나 외부 이벤트에 따라 값의 변경이 필요할 때 사용한다.

👉 formState : {errors}
각 필드별 검사 에러 메시지와 상태를 포함하는 객체이다.
errors.필드 이름을 통해 유효성 검사에 실패하였을 경우에 해당 필드의 에러 메시지를 가져올 수 있다. 

👉 resolver: yupResolver(schema)
yup스키마를 기반으로 유효성 검사를 적용한다.

👉 mode: "onBlur"
사용자가 입력필드에 발생시키는 이벤트에 따라 유효성 검사를 실행 
onclick에 경우 클릭할 떄마다 유효성 검사를 한다고 보면된다.

 

 

 

⬛ Yup

  //유효성 조건(yup)
  const schema = yup.object({
    email: yup
      .string()
      .email("올바른 이메일 형식이 아닙니다.")
      .required("필수 입력입니다."),
    password: yup
      .string()
      .required("필수 입력입니다.")
      .matches(
        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?/~`\-=|\\]).{10,16}$/,
        "10~16자 대소문자+영문+특수 기호로 조합해주세요."
      ),

    password2: yup
      .string()
      .oneOf([yup.ref("password")], "비밀번호가 일치하지 않습니다.")
      .required("비밀번호 확인은 필수 입니다."),

    name: yup
      .string()
      .required("필수 입력입니다")
      .matches(/^[가-힣]*$/, "한글로만 입력해주세요.")
      .max(4, "4자 이내로 입력해주세요."),
    birth: yup
      .string()
      .matches(
        /^(19[0-9][0-9]|20\d{2})(0[0-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/,
        "정확한 생년월일 8자리로 입력해주세요"
      ),
    phone: yup
      .string()
      .matches(/^[0-9\b]{0,13}$/, "휴대번호를 정확하게 입력해주세요."),
    address1: yup.string().required("필수 입력입니다."),
  });

👉 yup의 유효성검증들을 구현한 스키마이다.
체인 형식으로 조건들을 나열할 수 있으며 리액트 폼에서 유효성을 통과하지 못한 경우에 
지정한 에러 메시지를 errors에 담는것이다.

어떠한 메서드들이 있는지 궁금하면 한번 찾아보는걸 추천한다.