[ React.js]useform 사용 방법

1] React Hook Form: useForm

1. useForm 이란

useForm은 React Hook Form 라이브러리에서 제공하는 커스텀 훅으로, 폼 관리를 손쉽게 할 수 있도록 도와줍니다. useForm은 객체를 인수로 받아 다양한 옵션을 설정할 수 있습니다

2. 주요 옵션

• mode: 사용자가 폼을 제출하기 전에 언제 검증이 발생할지 설정하는 옵션입니다.
  • onSubmit (기본값): 폼 제출 시 검증이 발생합니다.
  • onBlur: 입력 필드가 포커스를 잃을 때 검증이 발생합니다.
  • onChange: 입력 값이 변경될 때마다 검증이 발생합니다. 이 경우 성능에 영향을 미칠 수 있습니다.
  • onTouched: 필드가 처음으로 포커스를 잃을 때 검증이 발생하고, 이후로는 값이 변경될 때마다 검증됩니다.
  • all: onBlur와 onChange 이벤트 모두에서 검증이 발생합니다.
• reValidateMode: 폼이 제출된 후에 에러가 있는 입력 필드가 다시 검증되는 시점을 설정하는 옵션입니다.
  • onChange (기본값): 입력 값이 변경될 때마다 재검증이 발생합니다.
  • onBlur: 입력 필드가 포커스를 잃을 때 재검증이 발생합니다.
• defaultValues: 폼의 기본 값을 설정하는 옵션입니다. 동기적 및 비동기적으로 기본 값을 설정할 수 있으며, 이 값은 폼이 처음 렌더링될 때 사용됩니다.
• values: 외부 상태나 서버 데이터로 폼 값을 동기화하는 데 유용한 옵션입니다. values가 업데이트되면 폼 값이 자동으로 갱신됩니다.

 

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

function App() {
  const { register, handleSubmit } = useForm({
    mode: "onSubmit",
    defaultValues: {
      firstName: "",
      lastName: "",
    },
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />
    </form>
  );
}

2] React Hook Form: 폼 상태 관리와 검증

1. 폼 상태 관리

useForm 훅은 폼의 상태를 관리하는 여러 가지 기능을 제공합니다. formState 객체를 통해 폼의 다양한 상태를 확인하고 제어할 수 있습니다.

• errors: 각 입력 필드의 오류 상태를 관리합니다. 서버에서 반환된 오류 상태와 동기화할 수 있습니다.
• isSubmitting: 폼이 제출 중인 상태를 나타냅니다.
• isDirty: 사용자가 입력 필드를 수정한 상태를 나타냅니다.

2. 검증 옵션

useForm은 다양한 방식으로 폼 입력 값을 검증할 수 있도록 옵션을 제공합니다.

• criteriaMode: 필드에서 발생한 모든 오류를 표시할지, 첫 번째 오류만 표시할지 설정할 수 있습니다.
  • firstError (기본값): 각 필드에서 발생한 첫 번째 오류만 수집됩니다.
  • all: 모든 오류를 수집합니다.
• shouldFocusError: 검증 실패 시 첫 번째 오류가 발생한 필드에 자동으로 포커스를 설정할지 여부를 제어합니다. 기본값은 true입니다.

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: "First name is required" })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}
      <input type="submit" />
    </form>
  );
}

3] React Hook Form

1. 폼 값과 에러 상태 초기화

useForm에서는 폼을 초기화할 수 있는 다양한 방법을 제공합니다. 이를 통해 폼을 새로 고침 없이도 값과 에러 상태를 쉽게 초기화할 수 있습니다.

• reset: 폼 전체를 초기 상태로 되돌립니다. resetOptions를 사용해 초기화 시 값을 유지하거나 에러 상태를 유지할 수 있습니다.
• resetField: 특정 필드만 초기화할 수 있습니다.

2. 외부 라이브러리와 통합

useForm은 Yup, Zod, Joi 등과 같은 외부 검증 라이브러리와 통합할 수 있습니다. 이를 통해 더 강력하고 유연한 검증을 구현할 수 있습니다.

• resolver: 외부 라이브러리와 통합하기 위한 옵션입니다. 사용자가 선호하는 검증 라이브러리를 선택해 사용할 수 있습니다.

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  name: yup.string().required("Name is required"),
  age: yup.number().required("Age is required").positive().integer(),
});

function App() {
  const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} />
      <input type="number" {...register("age")} />
      <input type="submit" />
    </form>
  );
}