본문으로 건너뛰기

FormState

</> FormState: FormStateProps v7.68.0부터​

useFormState와 같은 기능을 컴포넌트 형태로 제공하는 React Hook Form 컴포넌트입니다. 다른 컴포넌트 안에서 훅을 사용하는 대신 JSX에서 <FormState />를 직접 사용해 폼 상태를 구독하고 렌더링할 수 있습니다.

Props(속성)​

이름타입설명
controlObjectcontrol 객체이며 useForm이 제공합니다. FormProvider를 사용한다면 선택 사항입니다.
namestring | string[] 단일 입력 이름이나 이름 배열을 지정하거나 모든 입력의 formState 업데이트를 구독합니다.
disabledboolean = false구독을 비활성화하는 옵션입니다.
exactboolean = false이름을 정확히 일치시킬지 지정합니다. false(기본값)이면 구독한 이름이 변경된 필드 이름의 접두사이거나 그 반대일 때 구독이 실행됩니다. v7.81.0부터 true이면 구독한 필드 자체나 상위 경로 중 하나가 업데이트될 때 실행되지만, 중첩된 하위 경로가 변경될 때는 실행되지 않습니다. 자세한 내용은 useFormState를 참고하세요.
renderFunction지정한 폼 필드의 폼 상태를 구독하고 폼 상태가 변경될 때마다 자식 함수를 리렌더링합니다. 상태를 직접 연결하지 않고도 JSX에서 폼 상태를 선언적으로 사용할 수 있습니다.
예시:​
import { useForm, FormState } from "react-hook-form"

const App = () => {
  const { register, control } = useForm()

  return (
    <div>
      <form>
        <input {...register("foo", { min: 3 })} />
        <input {...register("bar")} />
        {/* re-render only when form state of `foo` changes */}
        <FormState
          control={control}
          name="foo"
          render={({ errors }) => <span>{errors.foo?.message}</span>}
        />
      </form>
    </div>
  )
}