React-Hook-Form

✅ React-Hook-Form이란?

React Hook Form 은 리액트에서 form을 쉽게 만들기위한 라이브러리로 성능이 좋고 유효성 검사에 아주 탁월하다.

장점으로는 아래 항목들이 있다.

• 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다.
• 다른 라이브러리 혹은 React에 비해 Re-render 수가 적다.
• Fast Mounting (로딩 속도 👍)
• TypeScript를 기본으로 지원한다.

⭐️ 사용방법

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

 <div className="App">
      <form>
        <input type="text" placeholder="username" />
        <input type="submit" />
      </form>
    </div>

먼저 useForm이라는 hook을 불러와야 하고 아래에서 설명하는 기능을 이용해서 사용해야한다.

1️⃣ Register

Register는 input의 값을 불러오기위한 함수로 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.

먼저 Register를 사용하기 위해서는 Input에 다음과 같이 {...register("사용하고 싶은 이름", {"검증할 내용"})} 이라고 적어주면 나중에 적은 이름으로 값을 불러올 수 있다.
(이제 더이상 onChange 등의 함수를 직접 만들 필요가 없다! 👊) input의 값을 확인하기 위해서는 watch라는 함수를 사용한다.

  <TextInput
   label={'이름'}
   type={'text'}
   required={true}
   placeholder={'이름을 입력해주세요'}
   {...form.register('name', {required: true})}
   />

...register를 쓰는 이유는 이 한줄이 < name = "name" / value = {name} / onChange={onChange}와 똑같기때문이다!
게다가 유효성검사도 커스텀하여 편리하게 쓸 수 있다.

const onNext = () => {
   if (
       !!form.watch('name') &&
       !!form.watch('phone') &&
       !!form.watch('email') &&
       form.watch('orgName') &&
       form.watch('password') === form.watch('passwordConfirmation')
        ) {
          setModalOpen(true);
        } else {
          toast.info('모든 정보를 정확하게 입력해 주세요');
        }
    };

2️⃣ handleSubmit

handleSubmit은 Submit을 관리하기 위해 만든 함수이다.

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

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

   const submit = (data: UserSignUpRequestDto) => {
      postUser(data)
         .then(() => {
             login({email: data.email, password: data.password})
                 .then(() => router.push(WelcomePageRoute.path()))
                 .catch(errorNotify);
          })
         .catch(errorNotify);
    };

3️⃣ onError

handleSubmit은 두가지 인자를 받는데 하나는 onSubmit이 정상적으로 작동했을때 실행하는 함수이고, 다른 하나는 onError로 Form에서 에러가 났을때 실행되는 함수이다.