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();
