react-hook-form

서론

클론 코딩 영상을 보면서 알았습니다. 기존에는 useState에 input value에 맞춰서 상태관리를 하고 FormEvent를 통해 해당 event 처리를 했습니다. 이러한 과정에서 input값이 입력될 때 마다 매번 렌더링이 되었습니다. 특히 input값이 많아지면 많아질 수록 렌더링이 늘어났고.. 하지만 react-hook-form을 통하면 렌더링이 확 줄어들고 사용자의 편의성을 높여주었습니다.

공식 Github 계정 후원 목록

토스에서도 React-hook-form 라이브러리를 후원을 하더라고요!!

---

React Hook Form

why react-hook-form?

React Hook Form은 React 기반의 폼 관리 라이브러리입니다. 이 라이브러리는 간편한 API를 제공하여 폼의 상태 관리, 유효성 검사, 오류 처리 등을 간편하게 처리할 수 있도록 도와줍니다.

1. 간편한 사용: React Hook Form은 간단하고 직관적인 API를 제공합니다. 각 입력 필드에 대해 커스텀 훅을 사용하여 폼 상태를 관리할 수 있습니다.
2. 높은 성능: React Hook Form은 가볍고 빠른 성능을 제공합니다. 컴포넌트의 리렌더링을 최소화하고 입력 필드의 값 및 유효성 상태를 효율적으로 관리하여 빠른 사용자 경험을 제공합니다.
3. 유효성 검사: React Hook Form은 내장된 유효성 검사 규칙을 사용하여 입력 필드의 유효성을 검사할 수 있습니다. Yup, Joi 등과 같은 외부 유효성 검사 라이브러리와 통합하여 사용할 수도 있습니다.
4. 커스텀 컴포넌트와의 통합: React Hook Form은 다른 React 컴포넌트와 쉽게 통합할 수 있습니다. 커스텀 입력 컴포넌트와 함께 사용하여 재사용 가능한 폼 필드를 만들 수 있습니다.
5. 상태 관리: React Hook Form은 내부적으로 관리되는 폼 상태를 제공합니다. 상태 업데이트와 에러 처리는 간단한 API 호출로 처리됩니다.
6. 제어되지 않은 컴포넌트와의 호환성: React Hook Form은 제어되지 않은 컴포넌트와 함께 사용할 수 있습니다. 기존에 사용하던 제어되지 않은 입력 필드를 쉽게 마이그레이션할 수 있습니다.

설치 및 사용법

// install
npm install react-hook-form

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

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

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter number for age.</p>}
      <input type="submit" />
    </form>
  );
}

공식 홈페이지에 나와있는 간단한 예시입니다. 

register, handleSubmit, formState: { errors }를 useForm에서 가져와서 사용합니다.

1. register: 입력 필드를 등록하는 함수입니다. 이를 통해 react-hook-form이 입력 필드를 추적하고 제어합니다. "register"함수는 입력 필드의 "ref" 속성에 할당됩니다.
2. handleSubmit: 폼 제출을 처리하는 함수입니다. 이 함수는 폼 데이터를 유효성 검사하고 처리하는데 사용합니다. 폼 제출 이벤트가 발생하면 이 함수를 호출합니다.
3. formstate: 폼 상태 객체입니다. "formstate" 객체는 현재 폼의 상태와 오류 정보를 포함합니다. "errors" 속성을 통해 입력 필드의 유효성 검사 오류를 확인할 수 있습니다.

---

내가 사용한 코드

import { FieldValues, SubmitHandler, useForm, UseFormRegister } from "react-hook-form";

interface InputProps {
  id: string
  register: UseFormRegister<FieldValues>
  ...
}

const Input = ({id, register, ...}: InputProps) => {
  return(
    <input
      id={id}
      {...register(id, { required })}
      ...
    />
  )
}

const RegisterModal = () => {
  ...

  const {
  register,
  handleSubmit,
  formState: { errors },
  } = useForm<FieldValues>({
    defaultValues: {
      name: "",
      email: "",
      password: "",
    },
  });
  
  const onSubmit: SubmitHandler<FieldValues> = (data) => {

  axios
    .post("/api/register", data)
    .then(() => {
      registalModal.onClose();
    })
    .catch((error) => {
      toast.error("엥?");
    })
    ...
  };
  
  ...
  
  return (
  <Input
    id="email"
    register={register}
    ...
  />
  )
}

타입스크립트로 작성한 코드라서 위의 자바스크립트 예제 코드와는 많이 다릅니다. 우선 기본적인 register, handleSubmit, formstate는 똑같이 사용합니다.

 useForm<FieldValues>({
   defaultValues: {
     name: "",
     email: "",
     password: "",
   },  
 })

그런데 useForm의 타입을 선언을 해줍니다. ([key: string] : any 이런 타입입니다.) register에 사용할 key의 value값을 초기화 합니다.

즉, 기본값을 설정해줍니다. 그 다음에는, onSubmit에 SubmitHandler<FieldValues>선언을 해줍니다. 즉, onSubmit을 할 때, name, email, password가 없으면 errors가 발생합니다. 여기서 Input은 모듈화 시켰기 때문에 아래 코드에서 보면

<input
  id={id}
  {...register(id, { required })}
  ...
/>

 

 

이런식으로 사용했습니다. id 값을 받아와서 해당 id 값을 register의 입력필드로 사용하고 추가적인 required 옵션을 사용해서 값이 꼭 있을때 사용한다는 뜻입니다.

 

---

정리

기존에 만들었던 프로젝트에서 수정을 해보고 진행해보면 좋을 것 같습니다.
여기서는 prisma, mongodb를 사용했지만 기존의 상태관리 툴인 redux, recoil 이나 zustand에서도 활용을 해보려고합니다.

참조

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

GitHub - react-hook-form/react-hook-form: 📋 React Hooks for form state management and validation (Web + React Native)

https://react-hook-form.com/get-started#Quickstart

Get Started

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

TS Support