React Hook Form@7

React 에서 폼을 간편하게 관리하기 위한 라이브러리입니다.

설치

# npm
npm install react-hook-form

# yarn
yarn add react-hook-form

useForm

설치가 완료되면, useForm 훅을 사용하여 폼을 초기화하고 제출 처리 함수를 정의하면 됩니다.

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

function UseForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: {
      name: "",
    },
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("name", { required: true })} />
      {errors.name && <span>이름을 입력해주세요.</span>}
      <button type="submit">제출</button>
    </form>
  );
}

export default UseForm;

useForm 훅을 사용하여 폼을 초기화하고, register 함수를 사용하여 각 입력 필드를 등록합니다.

register 함수는 입력 요소를 폼에 등록하여 입력 요소의 상태를 추적하고 제출 시에 처리하도록 해주는 역할을 합니다. handleSubmit 함수를 사용하여 제출을 처리하고, 제출 시에는 입력된 데이터를 onSubmit 함수로 전달합니다.

 

useController

React Hook Form 의 다른 방법으로 주로 커스텀 입력 요소나 외부 라이브러리와 함께 사용됩니다.

1. 커스텀 입력 요소: React Hook Form 은 기본적으로 HTML 의 표준 입력 요소를 처리합니다. 그러나 때로는 사용자 지정 스타일이나 로직이 필요한 경우가 있습니다. 이 때는 useController 를 사용하여 커스텀 입력 요소를 만들고, 해당 입력 요소에 대한 상태와 제어를 등록할 수 있습니다.

2. 예를 들어, MUI, Ant Design 등의 라이브러리를 사용하는 경우, 통합해서 쓸 수 있습니다.

import { useController } from "react-hook-form";
import { Input } from "antd";

function MyTextField({ name, control, rules }) {
  const { field, fieldState } = useController({
    name,
    control,
    rules,
  });

  return (
    <>
      <Input
        {...field}
        onChange={(e) => field.onChange(e.target.value)}
        value={field.value}
      />
      {fieldState.error && <span>텍스트 필드를 채워주세요.</span>}
    </>
  );
}

export default MyTextField;

useController 훅에서 name, control, rules 는 각 커스텀 입력 요소를 설정하는데 사용되는 속성입니다.

이러한 속성은 React Hook Form 과 상호 작용하여 입력 요소의 이름, 컨트롤러 및 유효성 검사 규칙을 정의합니다.

1. name: 입력 요소의 이름을 나타냅니다. 이 이름은 React Hook Form에서 사용되는 식별자로 사용되며, 제출된 데이터를 정확히 식별하는 데 사용됩니다.
2. control: React Hook Form의 컨트롤러 객체를 나타냅니다. 이 객체는 React Hook Form과 입력 요소 사이의 다리 역할을 하며, 입력 요소의 상태를 추적하고 제어합니다.
3. rules: 입력 요소에 적용할 유효성 검사 규칙을 정의합니다. 이 규칙은 입력 요소가 유효성 검사를 통과하기 위해 충족해야하는 조건을 지정합니다. 예를 들어, 필수 입력 필드인 경우 required: true 와 같은 규칙을 설정할 수 있습니다.

useController 는 field, fieldState 를 반환합니다.

1. field: 이 객체는 폼 컨트롤러로 사용됩니다. React Hook Form에 의해 제어되는 입력 요소의 상태와 값을 관리합니다. 일반적으로 커스텀 입력 요소의 value, onChange, onBlur와 같은 이벤트 핸들러에 바인딩됩니다.
2. fieldState: 이 객체는 입력 요소의 상태에 대한 정보를 포함합니다. 주로 유효성 검사 오류에 대한 상태를 나타내는데 사용됩니다. 예를 들어, 오류가 발생하면 fieldState.error 속성을 통해 오류 메시지를 확인할 수 있습니다.

위에서 만든 컴포넌트를 사용해보자.

import { useForm } from "react-hook-form";
import MyTextField from "@components/common/antd/MyTextField";

function UseForm() {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      name: "",
    },
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" {...register("name", { required: true })} />
      {errors.name && <span>이름을 입력해주세요.</span>}
      <MyTextField
        control={control}
        name="textField"
        rules={{ required: true }}
      />
      <button type="submit">제출</button>
    </form>
  );
}

export default UseForm;