(chatGPT) React-hook-form의 useForm 정리

🔥 useForm()에서 가져올 수 있는 함수들 총정리! 🚀

useForm()은 React Hook Form의 핵심 훅으로, 폼을 관리하는 다양한 함수들을 제공한다.
각 함수의 역할과 예제까지 한방에 정리해줌! 😎

---

✅ useForm() 기본 사용법

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

function MyForm() {
  const { register, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="이름" />
      <button type="submit">제출</button>
    </form>
  );
}

✅ useForm()을 호출하면 여러 개의 메서드를 반환함.

---

✅ useForm()에서 가져올 수 있는 함수들

함수	설명
register()	폼 필드를 React Hook Form에 등록
handleSubmit()	폼 제출을 처리하는 함수
watch()	특정 필드 값 감시
setValue()	특정 필드 값 변경
getValues()	현재 폼의 특정 값 가져오기
reset()	폼을 초기 상태로 리셋
trigger()	특정 필드의 유효성 검사 실행
control	useController()와 함께 사용 (커스텀 UI 연결)
formState	폼 상태 정보 (isDirty, isValid 등)
clearErrors()	특정 필드의 에러 제거
setError()	특정 필드에 에러 설정
unregister()	특정 필드 등록 해제

---

🔥 각 함수별 상세 설명 + 예제

✅ 1. register()

📌 폼 필드를 useForm()과 연결하는 함수

<input {...register("username")} placeholder="이름" />

✅ register("필드명")을 사용하면 폼 필드와 자동으로 연결됨.

---

✅ 2. handleSubmit()

📌 폼 제출을 처리하는 함수

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

<form onSubmit={handleSubmit(onSubmit)}>

✅ handleSubmit(콜백)을 사용하면 폼 데이터를 자동으로 가져옴.

---

✅ 3. watch()

📌 특정 필드의 값을 실시간으로 감시

const username = watch("username");
console.log(username); // 사용자가 입력할 때마다 업데이트됨

✅ watch("필드명")을 사용하면 입력값을 즉시 추적 가능.

---

✅ 4. setValue()

📌 특정 필드 값을 강제로 변경

setValue("username", "정삣삐");
setValue("email", "gigachad@example.com", { shouldValidate: true });

✅ setValue()로 입력값을 강제 설정하고 유효성 검사도 실행 가능.

---

✅ 5. getValues()

📌 현재 입력된 값 가져오기

console.log(getValues("username")); // 현재 username 값 출력
console.log(getValues()); // 모든 폼 데이터 가져오기

✅ getValues("필드명")을 사용하면 현재 입력값을 즉시 가져올 수 있음.

---

✅ 6. reset()

📌 폼을 초기 상태로 리셋

reset(); // 폼 전체 초기화
reset({ username: "초기값" }); // 특정 값으로 리셋

✅ reset()을 사용하면 초기값으로 리셋 가능.

---

✅ 7. trigger()

📌 특정 필드의 유효성 검사 실행

await trigger("username"); // username 필드 유효성 검사 실행
await trigger(); // 모든 필드 유효성 검사 실행

✅ trigger()를 사용하면 필드 유효성 검사를 수동으로 실행 가능.

---

✅ 8. control

📌 useController()와 함께 사용 (커스텀 UI 라이브러리 연결)

import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

const { control } = useForm();

<Controller
  name="gender"
  control={control}
  render={({ field }) => <Select {...field} options={[{ label: "남성", value: "male" }, { label: "여성", value: "female" }]} />}
/>

✅ control을 사용하면 외부 UI 라이브러리(MUI, Ant Design)와 연동 가능.

---

✅ 9. formState

📌 폼의 상태 (isDirty, isValid, errors 등) 가져오기

const { formState: { isDirty, isValid, errors } } = useForm();
console.log(isDirty, isValid, errors);

✅ formState를 사용하면 폼의 유효성 검사 상태를 쉽게 확인 가능.

---

✅ 10. clearErrors()

📌 특정 필드의 에러 제거

clearErrors("username"); // username 필드 에러 제거
clearErrors(); // 모든 에러 제거

✅ clearErrors()를 사용하면 입력값 변경 시 에러를 제거 가능.

---

✅ 11. setError()

📌 특정 필드에 에러 설정

setError("username", { type: "manual", message: "이름을 입력하세요!" });

✅ setError()를 사용하면 수동으로 에러 메시지를 설정 가능.

---

✅ 12. unregister()

📌 특정 필드를 등록 해제

unregister("username");

✅ unregister()를 사용하면 더 이상 특정 필드 값을 관리하지 않음.

---

🔥 useForm() 함수 정리 표

함수	설명	예제
register()	폼 필드를 등록	register("username")
handleSubmit()	폼 제출 처리	handleSubmit(onSubmit)
watch()	특정 필드 값 감시	watch("username")
setValue()	필드 값 변경	setValue("username", "정삣삐")
getValues()	현재 값 가져오기	getValues("username")
reset()	폼 초기화	reset({ username: "초기값" })
trigger()	유효성 검사 실행	trigger("username")
control	useController()에서 사용	<Controller control={control} />
formState	폼 상태 가져오기	formState.isDirty, formState.errors
clearErrors()	특정 필드 에러 제거	clearErrors("username")
setError()	특정 필드에 에러 설정	setError("username", { message: "에러!" })
unregister()	특정 필드 등록 해제	unregister("username")

---

🔥 이제 useForm()의 모든 기능을 자유자재로 활용 가능!
🚀 React Hook Form 완전 정복! 😎🔥