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

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

Props

다음 표는 useFormState의 인자에 대한 정보를 포함하고 있습니다.

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`로 설정됩니다. 중요: 모든 입력의 기본값을 useForm에 제공해야 hook form이 폼이 변경이 되었는지 비교할 수 있는 단일 소스를 가질 수 있습니다. const { formState: { isDirty, dirtyFields }, setValue, } = useForm({ defaultValues: { test: "" } }); // isDirty: true setValue('test', 'change') // isDirty: false 왜냐하면 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` formState에 영향을 주지 않습니다. `isValid`는 항상 전체 폼의 유효성 검사 결과를 통해 결정됩니다.
`isValidating`	`boolean`	유효성 검사 중 `true`로 설정됩니다.
`validatingFields`	`boolean`	비동기 유효성 검사가 이뤄지는 필드를 캡쳐합니다.
`errors`	`object`	필드 에러가 포함된 객체입니다. 에러 메세지를 쉽게 가져오기 위해 ErrorMessage도 있습니다.

Rules

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

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

Examples

CodeSandbox ^TS

import * as React from "react";
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이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.