</> `useFormContext:` Function

이 커스텀 훅은 폼 컨텍스트에 접근할 수 있게 해줍니다. useFormContext는 깊게 중첩된 구조에서 사용하기 위해 만들어졌으며, 컨텍스트를 prop으로 전달하는 것이 불편할 때 유용합니다.

Return

이 훅은 useForm이 반환하는 모든 메서드와 속성을 반환합니다.

const methods = useForm()

<FormProvider {...methods} /> // useForm이 반환하는 모든 속성

const methods = useFormContext() // 해당 속성들을 가져옴

규칙

useFormContext가 제대로 동작하려면 폼을 FormProvider 컴포넌트로 감싸야 합니다.

예제:

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에서 스타를 눌러 지원해 주세요.

useFormContext

</> useFormContext: Function

Return

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

</> `useFormContext:` Function