</> `useFormState:` `({ control: Control }) => FormState`

이 커스텀 훅을 사용하면 개별 폼 상태를 구독하고, 해당 커스텀 훅 수준에서 리렌더링을 격리할 수 있습니다. 이 훅은 폼 상태 구독과 관련하여 자체적인 범위를 가지므로, 다른 useFormState 나 useForm 에 영향을 주지 않습니다. 이 훅을 활용하면 규모가 크고 복잡한 폼 애플리케이션에서 리렌더링 영향을 줄일 수 있습니다.

Props

Name	Type	Description
`control`	Object	`useForm`이 제공하는 `control` 객체. `FormProvider`를 사용하고 있다면 선택 사항입니다.
`name`	string \| string[]	단일 입력 필드의 이름을 지정하거나, 여러 입력 필드의 경우 배열로 제공할 수 있으며, 모든 입력 필드의 formState 업데이트를 구독할 수도 있습니다.
`disabled`	boolean = false	구독을 비활성화할 수 있는 옵션.
`exact`	boolean = false	이 prop을 사용하면 입력 필드 이름 구독 시 정확히 일치하는 항목만 구독할 수 있습니다.

Return

Name	Type	Description
`isDirty`	boolean	사용자가 입력 중 하나라도 수정한다면 `true`로 설정됩니다. 중요: 모든 입력의 `defaultValues`를 `useForm`에 제공해야 hook form이 폼이 변경되었는지 비교할 수 있는 단일 소스를 가질 수 있습니다. const { formState: { isDirty, dirtyFields }, setValue } = useForm({ defaultValues: { test: "" } }) // isDirty: true ✅ setValue('test', 'change') // isDirty: false 왜냐하면 there getValues() === defaultValues ❌ 이기 때문 setValue('test', '') 파일 타입 입력은 파일 선택 취소 및 FileList 객체 관리 때문에 애플리케이션 수준에서 관리되어야 합니다. 사용자 정의 객체, 클래스 또는 파일 객체는 지원하지 않습니다.
`dirtyFields`	object	사용자가 수정한 필드를 포함하는 객체입니다. 라이브러리가 `defaultValues`와 비교할 수 있도록 `useForm`을 통해 모든 입력의 `defaultValues`를 제공해야 합니다. 중요: `useForm`에서 `defaultValues`를 제공하여, hook form이 각 필드의 변경 상태를 비교할 수 있는 단일 소스를 가질 수 있도록 해야합니다. Dirty 필드는 전체 폼이 아닌 개별 필드 수준에서 dirty로 표시되므로, Dirty 필드는 폼이 `isDirty` 상태임을 나타내지 않습니다. 전체 폼 상태를 확인하려면 `isDirty`를 사용하세요.
`touchedFields`	object	사용자가 상호작용한 모든 입력을 포함하는 객체입니다.
`defaultValues`	object	useForm의 `defaultValues`에 설정된 값 또는 reset API를 통해 업데이트된 `defaultValues`입니다.
`isSubmitted`	boolean	폼이 제출된 후 `true`로 설정됩니다. `reset` 메서드가 호출될 때까지 `true`를 유지합니다.
`isSubmitSuccessful`	boolean	런타임 에러 없이 폼이 성공적으로 제출되었음을 나타냅니다.
`isSubmitting`	boolean	폼이 현재 제출 중이면 `true`, 그렇지 않으면 `false` 입니다.
`isLoading`	boolean	비동기 기본 값을 로드 중인 경우 `true` 입니다. 중요: 이 속성은 비동기 `defaultValues`에만 적용됩니다. const { formState: { isLoading } } = useForm({ defaultValues: async () => await fetch('/api') })
`submitCount`	number	폼이 제출된 횟수입니다.
`isValid`	boolean	폼에 에러가 없으면 `true`로 설정됩니다. `setError`는`isValid` 폼 상태에 영향을 주지 않습니다. `isValid`는 항상 전체 폼 검증 결과를 기준으로 계산됩니다.
`isValidating`	boolean	유효성 검사 중 `true`로 설정됩니다.
`validatingFields`	boolean	비동기 유효성 검사가 이뤄지는 필드를 캡쳐합니다.
`errors`	object	필드 에러가 포함된 객체입니다. 에러 메세지를 쉽게 가져오기 위해 ErrorMessage도 있습니다.
`disabled`	boolean	useForm의 disabled prop을 통해 폼이 비활성화된 경우 true로 설정됩니다.

RULES

반환된 formState 는 Proxy 로 감싸져 있어, 특정 상태가 구독되지 않은 경우 불필요한 연산을 건너뛰어 렌더링 성능을 향상시킵니다. 따라서 구독을 활성화하려면 formState 를 렌더링 전에 반드시 구조 분해하거나 읽어야 합니다.

const { isDirty } = useFormState() // ✅
const formState = useFormState() // ❌ should deconstruct the formState

Examples

CodeSandbox ^JS

import { useForm, useFormState } from "react-hook-form"

function Child({ control }) {
  const { dirtyFields } = useFormState({ control })

  return dirtyFields.firstName ? <p>Field is dirty.</p> : null
}

export default function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      firstName: "firstName",
    },
  })
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <Child control={control} />

      <input type="submit" />
    </form>
  )
}

지원해 주셔서 감사합니다

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

useFormState

</> useFormState: ({ control: Control }) => FormState

Props

Return

지원해 주셔서 감사합니다

</> `useFormState:` `({ control: Control }) => FormState`