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

이 커스텀 훅은 각 폼 상태를 구독하고, 커스텀 훅 수준에서 리렌더링을 분리할 수 있게 해줍니다. 이 훅은 폼 상태 구독에 있어서 자체적인 스코프를 가지기 때문에, 다른 useFormState와 useForm에 영향을 미치지 않습니다. 이 훅을 사용하면 크고 복잡한 폼 애플리케이션에서 리렌더링의 영향을 줄일 수 있습니다.

Props

이름	타입	설명
`control`	Object	`useForm`에서 제공하는 `control` 객체. `FormProvider`를 사용 중이라면 선택 사항입니다.
`name`	string \| string[]	단일 입력 이름, 배열 형태의 이름, 또는 모든 입력의 formState 업데이트를 구독할 수 있습니다.
`disabled`	boolean = false	구독을 비활성화하는 옵션입니다.
`exact`	boolean = false	이 프로퍼티는 입력 이름 구독 시 정확한 일치를 활성화합니다.

Return

이름	타입	설명
`isDirty`	boolean	사용자가 입력값을 수정한 후 `true`로 설정됩니다. 중요: `useForm`에서 모든 입력값의 `defaultValues`를 제공해야 합니다. 그래야 훅 폼이 폼이 더티 상태인지 비교할 수 있는 단일 진실 공급원을 가질 수 있습니다. const { formState: { isDirty, dirtyFields }, setValue } = useForm({ defaultValues: { test: "" } }) // isDirty: true ✅ setValue('test', 'change') // isDirty: false because there getValues() === defaultValues ❌ setValue('test', '') 파일 타입 입력은 파일 선택 취소와 FileList 객체 때문에 앱 레벨에서 관리해야 합니다. 커스텀 객체, 클래스 또는 파일 객체는 지원하지 않습니다.
`dirtyFields`	object	사용자가 수정한 필드가 담긴 객체입니다. `useForm`을 통해 모든 입력값의 `defaultValues`를 제공해야 합니다. 그래야 라이브러리가 `defaultValues`와 비교할 수 있습니다. 중요: `useForm`에서 `defaultValues`를 제공해야 합니다. 그래야 훅 폼이 각 필드의 더티 상태를 비교할 수 있는 단일 진실 공급원을 가질 수 있습니다. 더티 필드는 `isDirty` `formState`로 표현되지 않습니다. 더티 필드는 전체 폼이 아닌 필드 레벨에서 더티 상태를 표시하기 때문입니다. 전체 폼 상태를 확인하려면 `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` `formState`에 영향을 미치지 않습니다. `isValid`는 항상 전체 폼 유효성 검사 결과에 따라 결정됩니다.
`isValidating`	boolean	유효성 검사 중이면 `true`로 설정됩니다.
`validatingFields`	boolean	비동기 유효성 검사를 받고 있는 필드를 캡처합니다.
`errors`	object	필드 오류가 담긴 객체입니다. 오류 메시지를 쉽게 가져올 수 있는 ErrorMessage 컴포넌트도 있습니다.
`disabled`	boolean	useForm의 `disabled` 속성을 통해 폼이 비활성화되면 `true`로 설정됩니다.

규칙

반환된 formState는 렌더링 성능을 향상시키고 특정 상태가 구독되지 않았을 때 불필요한 계산을 건너뛰기 위해 Proxy로 감싸져 있습니다. 따라서 구독을 활성화하려면 렌더링 전에 이를 구조 분해하거나 읽어야 합니다.

const { isDirty } = useFormState() // ✅
const formState = useFormState() // ❌ formState를 구조 분해해야 합니다.

예제

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이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.

useFormState

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

Props

Return

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

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