React Hook Form

1. React Hook Form이란?

• React 애플리케이션에서 폼 관리와 유효성 검사를 간단하게 처리하도록 돕는 라이브러리이다.
• 최소한의 코드로 폼 상태 관리와 유효성 검사를 구현할 수 있다.
• 가볍고 성능이 우수하여 대규모 애플리케이션에서도 적합하다.

---

2. 주요 특징

1. 폼 상태 관리의 간소화:
   • 컴포넌트 상태 관리 없이 입력 필드 상태를 추적할 수 있다.
2. 유효성 검사:
   • 기본적인 유효성 검사를 쉽게 추가할 수 있으며, 커스텀 검증 로직도 구현 가능하다.
3. 성능 최적화:
   • 입력 필드의 리렌더링을 최소화하여 성능을 높인다.
4. 유연성:
   • 작은 프로젝트뿐만 아니라 대규모 프로젝트에도 적합하다.

---

3. 주요 키워드

• register:
  • 입력 필드를 폼에 등록하고, 유효성 검사를 설정한다.
  • 예:

    {...register("username", { required: "이름을 입력해주세요" })}

• handleSubmit:
  • 폼 제출을 처리하는 함수로, 유효성 검사를 통과한 데이터에 콜백 함수를 실행한다. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행한다.
  • 예:

    <form onSubmit={handleSubmit(onValidSubmit, onInvalidSubmit)}></form>

• watch:
  • 특정 입력 필드의 값을 실시간으로 감시한다.
  • 예:

    console.log(watch("username"));
    

• formState:
  • 폼의 상태를 추적하며, errors, isDirty, isValid와 같은 다양한 상태를 포함한다.

---

4. 설치 방법

npm install react-hook-form

---

5. 샘플 코드

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

export default function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onValidSubmit = (data) => {
    console.log("유효한 데이터:", data);
  };

  const onInvalidSubmit = (errors) => {
    console.log("유효하지 않은 데이터:", errors);
  };

  return (
    <form onSubmit={handleSubmit(onValidSubmit, onInvalidSubmit)}>
      <input
        type="text"
        placeholder="이름"
        {...register("username", {
          required: "이름은 필수 항목입니다.",
          minLength: {
            value: 2,
            message: "이름은 최소 2글자 이상이어야 합니다.",
          },
        })}
      />
      {errors.username && <p style={{ color: "red" }}>{errors.username.message}</p>}
      <br />

      <input
        type="email"
        placeholder="이메일"
        {...register("email", {
          required: "이메일은 필수 항목입니다.",
          pattern: {
            value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: "유효한 이메일을 입력해주세요.",
          },
        })}
      />
      {errors.email && <p style={{ color: "red" }}>{errors.email.message}</p>}
      <br />

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

---

6. 동작 과정

1. 사용자가 입력 필드에 데이터를 입력하면 register에 의해 폼 상태가 관리된다.
2. handleSubmit:
   • 제출 버튼 클릭 시 유효성 검사가 실행된다.
   • 유효한 경우: onValidSubmit 호출.
   • 유효하지 않은 경우: onInvalidSubmit 호출.
3. 에러 메시지:
   • 유효성 검사를 통과하지 못한 입력 필드는 errors 객체에 에러 메시지가 저장된다.
4. 결과는 콘솔에 출력되거나 원하는 대로 처리 가능하다.

---

7. 장점

• 최소한의 코드로 폼 상태와 유효성 검사를 관리할 수 있다.
• 입력 필드의 리렌더링을 줄여 성능이 뛰어나다.
• 커스텀 유효성 검사를 구현할 수 있어 유연하다.

---

8. 실무 팁

• 에러 스타일링:
  • 에러 메시지를 사용자가 쉽게 알아볼 수 있도록 스타일을 추가한다.
• 커스텀 검증 로직:
  • 복잡한 조건이 필요한 경우 validate 옵션을 활용한다.
  • 예:

    validate: {
      isPositive: (value) => value > 0 || "0 이상의 숫자만 입력해주세요.",
    }

• 테스트:
  • 폼 검증이 중요한 애플리케이션에서는 각 필드의 유효성 검사를 충분히 테스트한다.

---