React-hook-form으로 로그인/회원가입 유효성 검사

프로젝트에서 supabase를 통해 로그인과 회원가입을 구현하는 기능을 맡았다

필수로 구현해야 하는 기능 중에 react-hook-form 을 통해 유효성 검사를 하는 항목이 있어서

시도해보기로 했다!

 

 

그렇다면, 왜 react-hook-form를 쓰는 걸까?

1. TS를 기본으로 지원한다

2. 로딩 속도가 빠르다

3. 리렌더링 수가 적다

4. 코드량이 적어진다

 

이러한 장점들로 form을 만들 시, 사용하기에 적합하다!

 

 

 

우선 react-hook-form을 이용하기 위해 설치를 해야 한다.

yarn add react-hook-form

npm install react-hook-form

 

 

 

 

타입스크립트를 사용하기 때문에 input의 타입을 정해준다.

export type Inputs = {
  userEmail: string;
  userPassword: string;
  userPasswordCheck: string;
  userNickname: string;
};

 

 

useForm이라는 hook을 불러온다

그리고 form의 기능을 가져온다

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


const {
    register,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors }
  } = useForm<Inputs>({ mode: 'onChange' });

 

 

 

 

 

register : input에서 값을 불러오기 위한 함수 (onChange를 만들지 않아도 된다!)

 {...register('userNickname')}

 

그럼, 값을 진짜 불러오는지 어떻게 확인할까?

값을 실시간으로 확인하기 위해서 watch라는 함수를 사용하면 된다

  console.log('watch', watch());

 

실시간으로 콘솔창에 찍히는 것을 볼 수 있다.

 

 

 

 

 

handleSubmit : React-hook-from에서 submit을 관리하기 위한 함수다

<StFormWrapper onSubmit={isLogin ? handleSubmit(signInHandler) : handleSubmit(signUpHandler)}>

 

함수를 인자로 받으며, 그 함수에 data라는 인자를 넘겨준다

 

 

 

 

실시간 유효성 검사

 useForm({ mode: 'onChange' });

 

useForm의 mode를 onChange로 바꿔주면 React-hook-from이 실시간으로 유효성 검사를 하게 된다

 

 

  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  const passwordRegex = /(?=.*\d)(?=.*[a-zA-ZS]).{8,}/;
  
  
          <div>
          <StInputWrapper>
            <FaRegUser />
            <StInput
              type="text"
              placeholder="Email"
              autoFocus
              {...register('userEmail', {
                required: true,
                pattern: emailRegex
              })}
            />
            {errors?.userEmail?.type === 'required' && <StWarning> ⚠️ 이메일을 입력해주세요</StWarning>}
            {errors?.userEmail?.type === 'pattern' && <StWarning> ⚠️ 이메일 양식에 맞게 입력해주세요</StWarning>}
          </StInputWrapper>
        </div>

 

 

 

공식문서에 보면 유효성 검사를 할 수 있는 메서드들이 나온다

 

required : 필수로 값을 입력

min : 숫자의 최솟값

max : 숫자의 최댓

minLength : 문자 길이의 최솟값

maxLength : 문자 길이의 최댓값

pattern : 정규식을 이용한 입력 필드에 대한 패턴 정의

 

 

유효성 검사를 통과하지 못한다면 에러메세지를 띄운다

 

 

 

 

 

 

 

공식문서 

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

 

 

 

 

---