React-Hook-Form 이란?

 

 

 

React Hook Form

---

React-Hook-Form은 React 기반의 폼 관리 라이브러리로, 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줍니다. 이를 통해 개발자는 많은 부분을 직접 구현할 필요 없이 더욱 빠르고 효과적인 폼 개발에 집중할 수 있습니다.

 

"React-Hook-Form은 성능이 우수하고 유연한 사용자 정의 훅을 제공하는 React 폼 라이브러리입니다. 이 라이브러리는 컴포넌트 중심의 개발 방식과 결합하여 매우 간단하고 직관적인 API를 제공합니다. React-Hook-Form을 사용하면 복잡한 폼 유효성 검사 로직을 쉽게 작성하고, 컴포넌트 상태를 간단하게 관리할 수 있습니다."

 

📚 React-Hook-Form 장점

1. 성능 최적화

React-Hook-Form은 내부적으로 성능 최적화를 고려하여 설계되었습니다. 입력 필드 갱신 및 다시 렌더링을 최소화하여 불필요한 작업을 방지하고 빠른 사용자 경험을 제공합니다. 이는 대규모 폼이나 복잡한 유효성 검사 로직을 가진 폼에서 특히 유용합니다. 

 

2. 간편한 API

React-Hook-Form은 사용하기 쉽고 직관적인 API를 제공합니다. 필요한 기능을 간단한 훅 함수로 호출하고, 컴포넌트 내에서 필요한 상태와 메서드를 사용할 수 있습니다. 이를 통해 개발자는 복잡한 폼 로직을 간결하게 작성할 수 있습니다. 

 

3. 유연성과 확장성

React-Hook-Form은 유연하고 확장 가능한 구조를 가지고 있습니다. 다양한 유효성 검사 규칙과 커스텀 유효성 검사 규칙을 사용하여 폼의 요구사항을 쉽게 처리할 수 있습니다. 또한, 커스텀 컴포넌트와의 통합이 간단하며, 다른 상태 관리 라이브러리와도 함께 사용할 수 있습니다.

---

✅ 간단 구현 예시

 

 

import "./App.css";
import { useRef } from "react";
import { useForm } from "react-hook-form";

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

  const password = useRef();
  password.current = watch("password");

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Email</label>
      <input
        name="email"
        type="email"
        {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
      />
      {errors.email && <p>This email field is required</p>}

      <label>Name</label>
      <input
        name="name"
        {...register("name", { required: true, maxLength: 10 })}
      />
      {errors.name && errors.name.type === "required" && (
        <p> This name field is required</p>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <p> Your input exceed maximum length</p>
      )}

      <label>Password</label>
      <input
        name="password"
        type="password"
        {...register("password", { required: true, minLength: 6 })}
      />
      {errors.password && errors.password.type === "required" && (
        <p> This name field is required</p>
      )}
      {errors.password && errors.password.type === "minLength" && (
        <p> Password must have at least 6 characters</p>
      )}

      <label>Password Confirm</label>
      <input
        type="password"
        name="password_confirm"
        {...register("password_confirm", {
          required: true,
          validate: (value) => value === password.current,
        })}
      />
      {errors.password_confirm &&
        errors.password_confirm.type === "required" && (
          <p> This password confirm field is required</p>
        )}
      {errors.password_confirm &&
        errors.password_confirm.type === "validate" && (
          <p>The passwords do not match</p>
        )}

      <input type="submit" style={{ marginTop: "40px" }} />
    </form>
  );
}

export default App;

 

위의 코드는 React-Hook-Form의 useForm 훅을 사용하여 폼을 관리하는 예시 입니다.

---

📚각각의 속성과 역할에 대해 알아보자!

1. watch

watch는 특정 입력 필드의 값 변화를 감지하기 위해 사용됩니다. 이 속성을 사용하여 입력 필드의 값 또는 특정 필드의 값만을 추출할 수 있습니다. 예를 들어, watch('fieldName')를 호출하면 'fieldName'에 해당하는 입력 필드의 값을 가져올 수 있습니다. 

 

2. register

register는 입력 필드를 React-Hook-Form에 등록하는 역할을 합니다. 이를 통해 React-Hook-Form은 해당 입력 필드를 폼의 일부로 인식하고, 값을 추출하거나 유효성 검사 등을 처리할 수 있습니다. register는 입력 필드의 ref 속성과 연결되며, 대부분의 경우 입력 필드의 ref 속성을 register에 전달해주면 됩니다. 

 

3. handleSubmit

handleSubmit은 폼 제출을 처리하기 위한 콜백 함수입니다. 이 콜백 함수는 폼이 제출되었을 때 실행되며, 입력 필드의 값 검증과 제출에 필요한 로직을 정의할 수 있습니다. handleSubmit은 폼의 제출 버튼 클릭 시 호출되거나, Enter 키를 눌렀을 때 자동으로 호출될 수 있습니다. 

 

4. formState

{ errors }: formState 객체는 폼 상태와 관련된 정보를 담고 있습니다. errors 속성은 폼 유효성 검사에서 발생한 오류를 저장하는 객체입니다. 각각의 입력 필드에 대한 유효성 검사 결과가 여기에 저장되며, 이를 활용하여 오류 메시지를 표시하거나 처리할 수 있습니다.

 

---

참고

• React Hook Form 을 이용한 유효성 체크 (youtube)
• React Hook Form 공식 사이트