React Hook Form

---

리액트에서 사용하는 폼 라이브러리로, 폼 구현이 간단해지고 높은 유연성과 유효성 검사가 가능하다.
=> onChange나 handler를 굳이 설정하지 않아도 간단하게 폼 구성이 가능하다!

React Hook Form 장점

1. 성능 최적화

React Hook Form은 리렌더링을 최소화하여 성능을 최적화한다. 입력 필드의 갱신 및 다시 렌더링을 최소화하여 불필요한 작업을 방지하고 빠른 사용자 경험을 제공한다.

2. 간결한 API

사용하기 쉽고 직관적인 API로 폼을 설정하고 검증할 수 있다. React의 훅을 이용해 폼 상태와 검증 로직을 쉽게 관리할 수 있다.

3. 작은 번들 크기

경량 라이브러리로, 번들 크기를 최소화하여 애플리케이션의 성능을 저하시키지 않는다.

4. 편리한 에러 핸들링

입력 필드별로 에러 메시지를 쉽게 관리하고 표시할 수 있다.

React Hook Form 사용 방법

설치 방법

npm install react-hook-form

사용 예시

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input id="firstName" {...register("firstName", { required: true })} />
        {errors.firstName && <p>This field is required</p>}
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input id="age" type="number" {...register("age", { min: 18 })} />
        {errors.age && <p>Age must be at least 18</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

주요 함수 및 훅

- useForm

폼의 상태와 검증 로직을 관리하는 훅이다. register, handleSubmit, errors 등을 반환한다.

- register

입력 필드를 React-Hook-Form에 등록하는 역할을 하고, 값을 추출하거나 유효성 검사 등을 처리할 수 있다.

- handleSubmit

폼 제출을 처리하기 위한 콜백 함수로, 유효성 검사를 수행하고 유효한 경우 제출 이벤트를 처리한다.

- formState

폼의 상태(에러, 변경 여부 등)를 포함하는 객체이다.