[React]react-hook-form로 회원가입 구현

⭐ react-hook-form?

로그인, 회원가입 등 form을 사용해서 기능을 구현해 본 경험이 다들 있을 것이다.
useState도 계속 사용해야 하고, onChange로 input 값을 확인하는 등 ... 번거롭고 은근 까다로운 작업이다.
이런 작업들을 react-hook-form 라이브러리를 사용하면 간단하고 효율적으로 할 수 있다!
공식문서는 아래 링크 첨부!
https://react-hook-form.com/

⭐ 설치방법

npm install react-hook-form
or
yarn add react-hook-form

위의 명령어로 설치해주고

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

사용하고 싶은 곳에서 import 해주면 됨!

⭐ useForm 객체

react-hook-form에서 제공하는 hook 중에 하나로 여러 함수를 가지고 있는 객체이다.
내가 사용했던 함수 위주로 적을 예정이다.

구조분해할당을 통해 꺼내서 사용하면 된다.

 const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

⭐ register 사용 방법

register 함수는 두개의 인자를 전달할 수 있는데,
첫 번째 인자는 input의 id와 같은 역할을 한다.
즉, 유일한 값이 전달되어야 한다.
두 번째 인자는 유효성 검사를 위한 코드를 넣어주는데, required, pattern, minLength 같은 검증을 할 수 있고,
검증을 통과하지 못하면 보여줄 오류 메시지도 설정할 수 있다.

<div>
          <label>이름</label>
          <input
            type="text"
            placeholder="이름을 입력하세요."
            {...register("username", {
              required: "빈 칸 없이 작성해주세요.",
              minLength: {
                value: 2,
                message: "두 글자 이상 입력해주세요.",
              },
            })}
          />
          <div className="error-message">
            {errors.username && errors.username.message}
          </div>
        </div>

이름은 필수 입력 항목이므로, required에 적어주었다.
그리고 2글자 이상 작성하도록 하기 위해 minLength의 value를 2로 정했다!

⭐ watch 사용 방법

특정 input 값을 관찰(watch)하고, 값이 변할 때마다 그 값을 반환한다.

        <div>
          <label>비밀번호</label>
          <input
            type="password"
            placeholder="비밀번호를 입력하세요."
            {...register("password", {
              required: "빈 칸 없이 작성해주세요.",
              minLength: {
                value: 6,
                message: "비밀번호는 최소 6자 이상이어야 합니다.",
              },
            })}
          />
          <div className="error-message">
            {errors.password && errors.password.message}
          </div>
        </div>
        {/* 비밀번호 일치 확인 */}
        <div>
          <label>비밀번호 확인</label>
          <input
            type="password"
            placeholder="비밀번호를 입력하세요."
            {...register("passwordChk", {
              required: "빈 칸 없이 작성해주세요.",
              validate: (value) =>
                value === watch("password") || "비밀번호가 일치하지 않습니다.",
            })}
          />
          <div className="error-message">
            {errors.passwordChk && errors.passwordChk.message}
          </div>

비밀번호 필드와 비밀번호 확인 필드의 입력 값이 같은지 확인하기 위해 watch를 사용했다.

⭐ handleSubmit 사용 방법

form을 submit 할 때, 사용하는 함수이다.
event.preventDefault()를 사용하지 않아도, handleSubmit을 사용하면 제출해도 새로고침 현상이 일어나지 않는다.
제출을 했을 때, form이 유효하다면 onValid가 실행되고, 유효하지 않다면 onInvalid가 실행된다.

  <form onSubmit={handleSubmit(onSubmit)}>

form 태그 안에 적어주면 된다.
유효성 검사를 통과해야만 제출이 된다.

⭐ formState 사용 방법

formState의 errors를 통해 간단하게 error를 검출할 수 있다.

      <div className="error-message">
        {errors.username && errors.username.message}
      </div>

위의 errors가 formState의 errors를 사용한 예시이다.