FormProvider

</> FormProvider: FormProviderProps

이 컴포넌트는 컨텍스트 객체를 제공하며, 하위 컴포넌트가 컨텍스트를 구독하고 useForm의 props와 메서드를 사용하도록 합니다.

Props(속성)

---

다음 표는 FormProvider에 적용됩니다. useFormContext는 인수를 받지 않습니다.

이름	타입	설명
...props	Object	FormProvider에는 모든 useForm 메서드가 필요합니다.

규칙

• FormProvider 컴포넌트를 중첩하지 마세요. React 컨텍스트는 병합되지 않으므로 내부에서 호출한 useFormContext()는 해당 호출을 감싸는 가장 안쪽 FormProvider의 폼 메서드와 상태만 참조하며 외부 폼은 참조하지 않습니다. 이로 인해 외부 폼을 기대하는 하위 컴포넌트의 필드 등록이나 검증이 예고 없이 깨질 수 있습니다.
• v7.44.0부터 FormProviderProps는 리졸버가 변환한 출력의 타입을 지정할 수 있도록 TTransformedValues 제네릭(FormProviderProps<TFieldValues, TContext, TTransformedValues>)을 받습니다.

예시:

---

import { useEffect } from "react"
import { useForm, FormProvider, useFormContext } from "react-hook-form"

export default function App() {
  const methods = useForm()

  const onSubmit = (data) => console.log(data)
  const { register, reset } = methods

  useEffect(() => {
    reset({
      name: "data",
    })
  }, [reset]) // ❌ never put `methods` as a dependency

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input {...register("name")} />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { register } = useFormContext() // retrieve all hook methods

  return <input {...register("test")} />
}