React-hook-form

 

React Hook Form은 React에서 폼(Form)을 쉽고 효율적으로 관리하기 위한 라이브러리라고 한다.

보통 리액트에서 input을 만들때 useState를 사용해 '제어 컴포넌트' 방식으로 구현하고 한다.

그런데 input이 많아지면 코드가 복잡해지고 성능이 떨어지는 문제가 생긴다.

이럴때 React-hook-form를 쓰면 편하다고 한다.

왜 React Hook Form을 쓸까?

성능 최적화 (불필요한 리렌더링 방지)

이게 가장 큰 장점이라고 한다. 일반적인 useState 방식은 글자 하나를 칠 때마다 전체 컴포넌트가 다시 그려지는데, React-hook-form는 비제어 컴포넌트(Uncontrolled Components) 방식을 기반으로 하여 사용자가 입력을 마칠 때까지 리렌더링을 최소화한다.

가볍고 의존성이 없음

다른 폼 라이브러리(예: Formik)에 비해 크기가 매우 작고, 다른 외부 라이브러리에 의존하지 않아 프로젝트에 부담이 적다.

간결한 코드 (유효성 검사)

이메일 형식 확인, 필수 입력 체크 등을 아주 적은 코드로 구현할 수 있다. register 함수 하나로 입력창과 폼 상태를 연결할 수 있다.

---

핵심 동작 원리

React-hook-form는 리액트의 ref를 사용하여 DOM 요소에 직접 접근합니다. 이를 통해 상태(State)가 바뀔 때마다 화면을 계속 다시 그리는 비용을 아껴준다.

---

간단한 코드 예시

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

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

  // 데이터 제출 시 실행될 함수
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 1. register를 통해 input 등록 */}
      <input {...register("username", { required: "아이디를 입력해주세요" })} />

      {/* 2. 에러 메시지 출력 */}
      {errors.username && <p>{errors.username.message}</p>}

      <button type="submit">제출</button>
    </form>
  );
}

---

언제 사용하면 좋을까?

• 입력 필드가 많은 폼을 만들 때 (회원가입, 설문조사 등)
• 폼 입력 시 발생하는 버벅임(성능 저하)을 줄이고 싶을 때
• 유효성 검사(Validation) 로직을 깔끔하게 관리하고 싶을 때

현재 Timefit이라는 프로젝트를 사이드로 만들고 있는데, 여기서 입력하는 폼이 많은 부분을 React-hook-form으로 마이그레이션을 해볼까 생각하고 있다.

 

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

React Hook Form - performant, flexible and extensible form library