이 컴포넌트는 컨텍스트 객체를 호스팅하고, 컨텍스트를 구독하는 컴포넌트가 useForm의 속성과 메서드를 사용할 수 있도록 합니다.

Props

아래 표는 FormProvider에 적용되며, useFormContext는 인자를 받지 않습니다.

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

규칙

중첩된 FormProvider 사용을 피하세요.

예제:

CodeSandbox ^JS

import React 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]) // ❌ `methods`를 의존성 배열에 넣지 마세요.

  return (
    <FormProvider {...methods}>
      // 모든 메서드를 컨텍스트에 전달합니다.
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input {...register("name")} />
        <input type="submit" />
      </form>
    </FormProvider>
  )
}

function NestedInput() {
  const { register } = useFormContext() // 모든 훅 메서드를 가져옵니다.

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

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.