useForm

useForm은 react-hook-form라이브러리에서 제공하는 핵심 훅으로, 폼 데이터를 효율적으로 관리하고 유효성 검사를 쉽게 구현할 수 있게 해준다. useform을 사용하면 폼의 상태와 유효성 검사로직을 간결하게 작성할 수 있어 코드의 유지 보수성이 높아진다. 

 

useForm의 기본구조 

useForm을 호출하게 되면 여러기능을 제공하는 객체를 반환한다. 이 객체에는 폼의 상태와 유효성 검사를 위한 다야한 도구들이 포함되어 있다. 다음은 기본적으로 사용되는 형식이다.

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

const { register, handleSubmit, formState, reset } = useForm();

 

useForm의 주요 옵션 

1. useForm 함수의 옵션

useForm은 여러 설정 옵션을 받습니다. 다음은 주요 옵션들입니다.

  • defaultValues
    • 폼의 초기 값을 설정합니다.
    • 객체 형태로 { name: "", email: "", password: "" } 등과 같이 각 필드의 초기값을 지정합니다.
    • 예시:
const { register, handleSubmit } = useForm({
  defaultValues: { name: "", email: "", password: "" },
});
  • mode
    • 유효성 검사를 언제 실행할지를 지정합니다.
    • 주요 값:
      • "onSubmit": 폼 제출 시 유효성 검사 실행 (기본값).
      • "onBlur": 입력 필드가 포커스를 잃을 때 검사.
      • "onChange": 입력 값이 변경될 때마다 검사.
      • "onTouched": 입력이 처음 수정된 이후부터 검사.
    • 예시
const { register, handleSubmit } = useForm({ mode: "onBlur" });
  • resolver
    • 외부 유효성 검사 라이브러리(예: Yup, Zod)와 연동할 때 사용합니다.
    • 커스텀 유효성 검사 로직을 추가할 수 있습니다.
    • 예시
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  name: yup.string().required(),
  email: yup.string().email().required(),
});

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

 

useForm 반환값 

useForm은 객체 형태로 여러 가지 유용한 메서드와 속성을 반환합니다.

  • register
    • 각 입력 필드에 이 메서드를 연결하여 react-hook-form이 필드의 상태와 유효성 검사를 관리하게 합니다.
    • 필드의 이름과 옵션을 매개변수로 받습니다.
    • 예시
       
<input {...register("name")} />
<input {...register("email", { required: "Email is required" })} />
  • handleSubmit
    • 폼 제출 시 실행할 함수로, 유효성 검사를 완료하고 성공 시 콜백 함수를 호출합니다.
    • onSubmit 콜백 함수로 폼 데이터를 전달하며, 에러 발생 시 콜백은 실행되지 않습니다.
    • 예시
const onSubmit = (data) => {
  console.log(data);
};

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("name")} />
  <button type="submit">Submit</button>
</form>
  • formState
    • 폼의 현재 상태를 나타내는 객체로, 다양한 상태값을 포함합니다.
      • isDirty: 폼이 수정된 상태인지 확인.
      • isValid: 폼의 유효성 여부.
      • errors: 각 필드의 에러 메시지 및 상태.
    • 예시
const {
  formState: { errors, isDirty, isValid },
} = useForm();

<div>{errors.email && <span>{errors.email.message}</span>}</div>
  • reset
    • 폼의 모든 필드를 초기 상태로 되돌리거나 특정 값을 설정해 리셋할 수 있습니다.
    • 예시
<button type="button" onClick={() => reset()}>Reset</button>
  • watch
    • 폼 필드의 값을 실시간으로 관찰하여 값의 변화를 감지합니다.
    • 특정 필드의 값이나 전체 폼 값을 반환할 수 있습니다.
    • 예시
const nameValue = watch("name");
  • setValue
    • 특정 필드의 값을 수동으로 설정할 때 사용합니다.
    • 예시
setValue("name", "John Doe");
  • getValues
    • 폼의 전체 값이나 특정 필드의 값을 즉시 가져옵니다.
    • 예시
const allValues = getValues();

+ Recent posts

티스토리툴바