</> `useFormContext:` Function

이 커스텀 훅은 폼 컨텍스트에 접근할 수 있게 해줍니다. useFormContext는 깊게 중첩된 구조에서 컨텍스트를 props로 전달하는 것이 불편할 때 사용하도록 설계되었습니다.

Return

이 훅은 useForm이 반환하는 모든 메서드와 props를 반환합니다.

const methods = useForm()

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

const methods = useFormContext() // 해당 props를 가져옴

RULES

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

Example:

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)

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

function NestedInput() {
  const { register } = useFormContext() // 모든 훅 메서드를 가져옴
  return <input {...register("test")} />
}

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.

useFormContext

</> useFormContext: Function

Return

지원해 주셔서 감사합니다

</> `useFormContext:` Function