회원가입 유효성 검사 (react-hook-form)

게시판 홈페이지를 만들던 중 회원가입 유효성 검사를 하기 위해서 react-hook-form을 사용하여 유효성 검사를 쉽게 구현할 수 있었다.

설치

npm i react-hook-form
yarn add react-hook-form

1. react-hook-form

사용법

import { useForm } from "react-hook-form";

  const {
    register,
    formState: { errors },
    handleSubmit,
    getValues,
  } = useForm<SignUpType>({ mode: "onBlur" });

1. mode

validation 전략을 설정하는데 사용한다.

(onSubmit, onChange, onBlur, all 등의 옵션이 있음.)

2. register

useForm을 통해서 컨트롤 할 폼 객체를 리턴받는 함수이다.

이것을 이용하여 input을 다룰 수 있다.

     <SignUpInput
                placeholder="이메일 형식으로 입력"
                {...register("email", {
                  required: "* 이메일은 필수 입력입니다.",
                  pattern: {
                    value: /\S+@\S+\.\S+/,
                    message: "* 이메일 형식에 맞지 않습니다.",
                  },
                })}
              />

register 함수의 첫 번째 매개변수는 "name"을 줄 수 있다.

해당 input의 key값으로써 반드시 들어가야하는 값이다.

두번째 매개변수 값으로는 option이 들어가는데,

이곳에서 유효성검사를 위한 프로퍼티들이 들어간다.

(required, min, max, minLength, maxLength, pattern 등)

유효성 검사를 위해 value 만을 줄수도 있지만,

value, message 로 구성된 객체를 줌으로써 해당 에러에 대한 구체적인 메세지를 제공할 수도 있다.

3. formState

register에 대한 에러 정보는 formState객체의 error에 담겨있다.

에러가 존재하지 않는다면 error의 객체는 빈 객체이고 만약 유효성 검사에 실

패하게 된다면 error의 객체에 에러의 값이 들어가게 된다.

이런식으로 에러 핸들링을 해줄 수 있다.

<ErrorMessage>{errors?.email?.message}</ErrorMessage>

4. getValues

react-hook-form에서 값을 추적할 수 있도록 해주는 함수이다.

getValues는 값을 반환하지만 리렌더링 시키지 않는 다는 장점이 있다.

나는 getValues를 통해 비밀번호 재확인 기능을 만들었다.

       <SignUpInput
                type="password"
                placeholder="비밀번호 재확인"
                {...register("password_confirm", {
                  required: true,
                  validate: {
                    matchesPreviousPassword: (value) => {
                      const { password } = getValues();
                      return (
                        password === value || "*비밀번호가 일치하지 않습니다."
                      );
                    },
                  },
                })}
              ></SignUpInput>
              <ErrorMessage>{errors.password_confirm?.message}</ErrorMessage>

5. handleSubmit

사용자가 입력을 마치면 등록버튼을 누르게 된다.

이 때 submit 이벤트가 발생하게 되는데 이 때 데이터에 대한 검증을 끝내고

서버로 보내야한다.

form 태그에 onSubmit에 handleSubmit이라는 함수를 넣어주고 매개변수

로 내가 정한 onSubmitHandler함수를 넣어주었다.

이때 data라는 매개변수를 받을 수 있는데,

이 data가 최종적으로 제출하는 데이터가 된다.

  const onSubmitHandler = async (data: SignUpType) => {
    try {
      await axios.post("API", {
        data,
      });
    } catch (error) {
      console.log(error);
    }
  };