본문으로 건너뛰기

useFormContext

</> useFormContext: () => UseFormReturn​

이 커스텀 훅을 사용하면 폼 context에 접근할 수 있습니다. useFormContext는 context를 prop으로 전달하기 번거로운 깊게 중첩된 구조에서 사용하도록 설계되었습니다.

반환값​

이 훅은 모든 useForm 메서드와 prop을 반환합니다.

const methods = useForm()

<FormProvider {...methods} /> // all the useForm return props

const methods = useFormContext() // retrieve those props
예제:​
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")} />
}