[React] React-Hook-Form 회원가입 입력 폼 유효성 검사

React 에서 회원가입 기능을 구현하기 위해서

입력받은 내용이 필수적으로 입력해야 되고, 글자 수는 몇 자 이상&몇 자 이하, 입력 패턴 등을 고려해야 한다.

 

React 에서 회원가입이나 로그인 등 입력해야 되는 form 을 구현할 때,

React Hook Form 을 사용하면 이를 간편하게 구현할 수 있다.

 

React-Hook-Form 세팅

설치하기

React Hook Form 을 설치하기 위해 터미널 창에 명령어를 입력해 준다.

 

npm install react-hook-form

 

 

useForm

React Hook Form 을 사용하기 위해

Form 기능을 관리하고 제어하는 hook 인 useForm 을 사용한다.

 

useForm 의 반환 값들은 다음과 같이

 

register, handleSubmit, watch, fromState : { errors } 가 있다.

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

 

register

입력 필드인 <input> <select> <textarea> 등을 React Hook Form 에 등록시킨다.

그래서 이를 사용해 해당 필드의 값이나 이벤트를 쉽게 관리할 수 있게 도와준다.

 

handleSubmit

폼 데이터를 처리할 콜백 함수를 인자로 전달하며, 폼이 유효할 경우에만 콜백 함수가 호출된다.

그래서 폼 제출 시 유효성 검사를 자동으로 수행하고, 유효하지 않은 경우 제출을 하지 않는다.

<form onSubmit={handleSubmit(onSubmit)}>
  ...
</form>

 

watch

지정된 입력 필드의 값이나 전체 폼의 값 변화를 관찰하여

특정 필드의 값이 변할 때마다 반응하거나 어떤 작업을 수행할 수 있다.

 

formState: { errors }

formState 는 폼의 현재 상태 정보를 담고 있는 객체이고 그중에서 errors 객체는

폼의 유효성 검사에서 발생하는 오류들을 포함하고 있다.

 

React-Hook-Form 사용

form 만들기

React Hook Form 을 본격적으로 사용하기 위해 회원가입 form 을 만들어준다.

function RegisterPage() {
  const {
    register,
    watch,
    formState: { errors },
    handleSubmit,
  } = useForm();
  
  return (
    <div style={{ textAlign: 'center' }}>
      <form>
        <label htmlFor="email">Email</label>
        <input name="email" type="email" id="email" />

        <label htmlFor="age">Age</label>
        <input name="age" type="number" id="age" />

        <label htmlFor="password">Password</label>
        <input name="password" type="password" id="password" />

        <input type="submit" />
      </form>
    </div>
  );
}

export default RegisterPage;

 

register 등록하기

React Hook Form 을 사용하기 위해 register 를 사용하여 등록한다.

 

등록하기 위해 등록할 이름을 입력하고, 조건을 설정해 준다.

• reguired - 필수 여부
• pattern - 정규 표현식
• min - 최솟값
• max - 최댓값
• minLength - 최소 길이
• maxLength - 최대 길이
• validate - 사용자 정의 검증 로직

reguired: true 를 통해 필수 필드로 설정하고, pattern 에는 정규 표현식을 입력하여 이메일의 입력 형식을 설정한다.

<input
  name="email"
  type="email"
  id="email"
  {...register('email', { required: true, pattern: /^\S+@\S+$/i })}
/>

 

min 을 사용하여 입력 값의 최솟값과 max 를 사용하여 입력 값의 최댓값을 설정한다.

<input
  name="age"
  type="number"
  id="age"
  {...register('age', { min: 12, max: 80 })}
/>

 

minLength 를 사용하여 입력 값 길이의 최솟값과 maxLength 를 사용하여 입력 값 길이의 최댓값을 설정한다.

<input
  name="password"
  type="password"
  id="password"
  {...register('password', {
    required: true,
    minLength: 6,
    maxLength: 20,
  })}
/>

 

handleSubmit 제출하기

handleSubmit 를 사용하면 register 를 등록하면서 설정한 값들이 만족해야 form 이 제출이 된다.

만약 조건을 만족하지 않을 경우 제출이 되지 않는다.

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

  return (
    <div style={{ textAlign: 'center' }}>
      <form onSubmit={handleSubmit(onSubmit)}>
        ...
      </form>
    </div>
  }
...

 

조건이 만족하면 정상적으로 제출이 되고

 

조건이 만족하지 않을 경우 제출이 되지 않는다.

 

formState 유효성 검사 에러

제출이 되지 않을 경우, formState: { errors } 를 사용하여

어떠한 부분에서 조건을 만족하지 않았는지 true, false 값을 얻어내어 오류 메시지를 화면에 표시할 수 있다.

 

register 에 등록된 email 이 요구조건이 만족하지 않았을 때,

errors.email 은 true 가 되어 true 일 때 메시지를 화면에 보여준다.

<label htmlFor="email">Email</label>
<input
  name="email"
  type="email"
  id="email"
  {...register('email', { required: true, pattern: /^\S+@\S+$/i })}
/>
{errors.email && <p>이메일을 입력해주세요.</p>}

 

password 의 요구조건이 만족하지 않았을 때, errors.password 는 true 가 되며

errors 가 발생한 타입이 required, minLength, maxLength 일 경우에 따라 메시지를 화면에 보여준다.

<label htmlFor="password">Password</label>
<input
  name="password"
  type="password"
  id="password"
  {...register('password', {
    required: true,
    minLength: 6,
	maxLength: 20,
  })}
/>
{errors.password && errors.password.type === 'required' && (
  <p>비밀번호를 입력해주세요.</p>
)}
{errors.password && errors.password.type === 'minLength' && (
  <p>비밀번호는 최소 6자 이상입니다.</p>
)}
{errors.password && errors.password.type === 'maxLength' && (
  <p>비밀번호는 최댜 20자 이하입니다.</p>
)}

 

---

 

지금까지 React Hook Form 을 세팅하고 사용하는 방법에 대해 알아보았다.

 

추가적으로 Zod 로 React-Hook-Form 유효성 검증을 할 수 있고

[React] Zod로 React-Hook-Form 유효성 검증

React-Hook-Form 의 FormProvider 로 간편하게 폼을 관리할 수 있다.

React-Hook-Form 의 FormProvider 로 간편하게 폼 관리하기 (+ useFormContext)

 

그리고 React-Hook-Form 에 대해 더 자세한 내용을 확인하고 싶으면 아래 공식 페이지에서 확인할 수 있다.

React Hook Form - performant, flexible and extensible form library