react-hook-form 톺아보기

로그인 창을 구현할 때 우리는 input을 이용하여 사용자의 정보를 입력받습니다.

이 과정에서 사용자의 입력정보가 유효한 정보인지 확인하기 위해 상태 값(state)을 만들어 일일이 체크를 해줘야만 했습니다.

input이 몇 개 없다면 이러한 방법으로 유효성검사를 하는 것이 나쁘지 않아 보일 수도 있습니다.

하지만 검사해야하는 input이 여러 개라면 어떨까요? 회원가입과 같은 확인해야 하는 사용자의 정보가 많아짐에 따라 각 input을 관리하는 상태 값들 또한 많아지게 됩니다. form validation까지 한다면 더욱더 관리해야 하는 상태 값은 늘어나게 될 것입니다.

 

이러한 문제를 해결하기 위해 react-hook-form 이라는 라이브러리를 사용해 볼 수 있습니다.

 

이 글은 react-hook-form 라이브러리의 기본적인 사용법에 대한 글입니다.

- 맥 기준으로 작성하였습니다.

 

 

1. 라이브러리 설치

- 사용하기 위해서 우선 프로젝트에 터미널 명령어로 설치를 해줍니다.

npm i react-hook-form

 

 

2. 기본적인 form 구현

- 제일 기본적인 form 유형으로 작성해보았습니다. 이메일과 아이디, 비밀번호, 비밀번호 리체크가 있는 폼입니다.

<form>
    <input type='email' placeholder='이메일을 입력해주세요'/>
    <input type='username'placeholder='아이디를 입력해주세요' />
    <input type='password' placeholder='비밀번호를 입력해주세요.' />
    <input type='password' placeholder='비밀번호를 한번 더 입력해주세요.' />
    <button>입력</button>
</form>

 

 

3. react-hook-form 사용해보기

- 상단에 useForm 을 import 해줍니다.

- react-hook-form에는 register, handleSubmit, formState, setError 등 다양한 기능이 들어있습니다. 

 

 

3.1 register

- 사용하고자 하는 input에 register를 스프레드 문법을 사용하여 넘겨줍니다. (이때 스프레드 문법을 사용하는 이유는 register를 콘솔로 찍어보면 객체의 형태로 onInput, onChange, onBulr 등이 담겨 있기에 이를 사용하기 위함입니다.)

-register 안에 name 값은 input이 많아지게될 때 각 input들을 구분하기 위해서 넣어줍니다.

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

function Form() {
    const { register } = useForm();
    
    return (
        <form>
            <input {...register('email')} type='email' placeholder='이메일을 입력해주세요'/>
            <input {...register('userName')} type='username'placeholder='아이디를 입력해주세요' />
            <input {...register('password')} type='password' placeholder='비밀번호를 입력해주세요.' />
            <input {...register('rePassword')} type='password' placeholder='비밀번호를 한번 더 입력해주세요.' />
            <button>입력</button>
        </form>
        )
}

 

 

3.2 watch

- 이제 우리가 작성한 form과 input들이 잘 연결되었는지 확인하기 위해 watch 메서드를 사용해 볼 수 있습니다.

- watch는 input의 변화를 감지합니다. 

- input의 값이 변함에 따라 우리가 적어둔 register안의 네임 값을 키 값으로 갖는 객체가 콘솔 창에 나오는 모습을 확인할 수 있습니다.

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

function Form() {
    const { register, watch } = useForm();
    console.log(watch);
    
    return (
        <form>
            <input {...register('email')} type='email' placeholder='이메일을 입력해주세요'/>
            <input {...register('userName')} type='username'placeholder='아이디를 입력해주세요' />
            <input {...register('password')} type='password' placeholder='비밀번호를 입력해주세요.' />
            <input {...register('rePassword')} type='password' placeholder='비밀번호를 한번 더 입력해주세요.' />
            <button>입력</button>
        </form>
        )
}

 

 

3.3 onSubmit

- form에 onSubmit 기능을 사용하기 위해 handleSubmit을 추가합니다.

- handleSubmit 메서드는 두개의 인자를 받는데 첫 번째는 submit이 성공적일 때 onValid, submit이 실패했을 때 onInValid 함수를 필요로 합니다.

- onValid는 필수 값이지만 onInValid는 필수 값은 아닙니다.

- form에 onSubmit 안에 handleSubmit를 넣어주고 인자 값으로 onValid함수를 넘겨주는 방식으로 사용합니다.

- handleSumbit은 모든 유효성 검사를 끝내고 데이터가 유효한 경우에만 onValid 함수를 실행하게 됩니다.

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

function Form() {
    const { register, watch, handleSubmit } = useForm();
    const onValid = (data) => {
      console.log(data)
    };
   
    return (
        <form onSbmit={handleSubmit(onValid)}>
            <input {...register('email')} type='email' placeholder='이메일을 입력해주세요'/>
            <input {...register('userName')} type='username'placeholder='아이디를 입력해주세요' />
            <input {...register('password')} type='password' placeholder='비밀번호를 입력해주세요.' />
            <input {...register('rePassword')} type='password' placeholder='비밀번호를 한번 더 입력해주세요.' />
            <button>입력</button>
        </form>
        )
}

 

 

3.4 required

- required속성은 HTML속성 값에도 존재하지만 그렇게 사용하게 될 경우에는 외부에서 임의로 우리의 HTML에 접근해서 required 속성을 지울 수 있습니다. 

- 이러한 점을 방지하기 위해 우리는 HTML이 아닌 react-hook-form 속성으로 required를 사용할 수 있습니다.

- 또한 minLength, maxLength 값들도 지정해 줄 수 있습니다.

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

function Form() {
    const { register, watch, handleSubmit } = useForm();
    const onValid = (data) => {
      console.log(data)
    };
   
    return (
        <form onSbmit={handleSubmit(onValid)}>
            <input {...register('email', {required: true})} placeholder='이메일을 입력해주세요'/>
            <input {...register('userName', {required: true, minLength: 10})} placeholder='아이디를 입력해주세요' />
            <input {...register('password', {required: true})} placeholder='비밀번호를 입력해주세요.' />
            <input {...register('rePassword', {required: true})} placeholder='비밀번호를 한번 더 입력해주세요.' />
            <button>입력</button>
        </form>
        )
}

 

 

 

- required 값에 메시지를 넣어줄 수도 있습니다.

<input {...register('email', {required: '이메일이 입력되지 않았습니다.'})} placeholder='이메일을 입력해주세요'/>

 

 

- 다른 value값들에게도 조건과 메세지를 넘겨줄 수 있습니다.

<input
{...register('password', {
    required: true,
        minLength: {
        value: 5,
        message: '비밀번호가 너무 짧습니다.'
        },
})}
placeholder='비밀번호를 입력해주세요.'
/>

 

 

- pattern 속성 값을 통해 정규식을 사용할 수 있습니다.

<input
{...register('email', {
    required: true,
    pattern: {
      value: /^[A-Za-z0-9._%+-]+@naver.com$/,
      message: '네이버 메일만 사용 가능합니다.'
      },
})}
placeholder='email'
/>

 

 

3.5 formState

3.5.1 errors

- 위에서 required 속성을 통해 조건을 지정해 줬다면 본격적으로 에러를 확인하기 위해 formState를 사용할 수 있습니다.

- 에러 메시지들은 콘솔에 formState메서드 안에 있는 errors를 찍어 확인해 볼 수 있습니다.

const { register, watch, handleSubmit, formState } = useForm();
    
console.log(formState.errors);

 

 

- 확인한 에러를 사용자에게 보여주기 위해 span 태그를 사용해 간단히 나타낼 수 있습니다.

function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm
  const onValid = (data) => {
    console.log(data);
  };
  
  return (
    <form onSubmit={handleSubmit(onValid)}
      <input 
        {...register('email', {
          required: '이메일이 입력되지 않았습니다.',
          pattern: {
            value: /^[A-Za-z0-9._%+-]+@naver.com$/,
            message: '네이버 이메일만 사용 가능합니다.',
          },
        })}
        placeholder='email'
      />
      <span>{errors.email.message}</span>
    </form>

 

 

이렇게 간단히 React-hook-form의 기능을 살펴보았습니다.

일전에는 일일이 상태 값을 만들어서 관리를 해줬었는데 이제는 이 라이브러리를 통해 아주 손쉽게 form data를 다룰 수 있습니다!