formState

</> formState: FormState

이 객체에는 전체 폼 상태에 관한 정보가 들어 있습니다. 사용자가 폼 애플리케이션과 상호작용한 내용을 추적하는 데 도움이 됩니다.

반환값

---

이름	타입	설명
isDirty	boolean	사용자가 입력 중 하나라도 수정하면 true로 설정됩니다. 중요: 모든 입력의 defaultValues를 useForm에서 제공하여 React Hook Form이 폼의 dirty 상태를 판단할 단일 기준을 갖게 해야 합니다. const { formState: { isDirty, dirtyFields }, setValue } = useForm({ defaultValues: { test: "" } }) // isDirty: true ✅ setValue('test', 'change') // isDirty: false because getValues() === defaultValues ❌ setValue('test', '') 파일 선택을 취소할 수 있고 FileList 객체를 사용하므로 파일 타입 입력은 애플리케이션 수준에서 관리해야 합니다. 사용자 정의 객체, 클래스 또는 File 객체는 지원하지 않습니다.
dirtyFields	object	사용자가 수정한 필드를 담은 객체입니다. 모든 입력의 defaultValues를 useForm에서 제공하여 라이브러리가 defaultValues.와 비교할 수 있게 해야 합니다. 중요: defaultValues를 useForm에 제공하여 React Hook Form이 각 필드의 dirty 상태를 비교할 단일 기준을 갖게 해야 합니다. 필드는 전체 폼이 아니라 필드 수준에서 dirty 상태로 표시되므로 dirty 필드가 반드시 isDirty formState를 나타내지는 않습니다. 전체 폼 상태를 판단하려면 isDirty를 사용합니다.
touchedFields	object	사용자가 상호작용한 모든 입력을 담은 객체입니다.
defaultValues	object	v7.37.0부터 useForm의 defaultValues에 설정했거나 defaultValues를 reset API로 갱신한 값입니다.
isSubmitted	boolean	폼이 제출되면 true로 설정되고, true 상태는 reset 메서드를 호출할 때까지 유지됩니다.
isSubmitSuccessful	boolean	런타임 오류 없이 폼이 성공적으로 제출되었음을 나타냅니다.
isSubmitting	boolean	현재 폼을 제출 중이면 true, 그렇지 않으면 false입니다.
isLoading	boolean	v7.41.0부터 현재 폼이 비동기 기본값을 불러오는 중이면 true입니다. 중요: 이 속성은 비동기 defaultValues에만 적용됩니다. const { formState: { isLoading } } = useForm({ defaultValues: async () => await fetch('/api') })
submitCount	number	폼이 제출된 횟수입니다.
isValid	boolean	폼에 오류가 없으면 true로 설정됩니다. setError는 즉시 isValid를 false로 강제합니다. 이 값 자체는 검증에서 파생되지 않으며, 다음 검증이 실행될 때(예: 다음 onChange, 제출 또는 trigger() 호출) 덮어쓰입니다.
isValidating	boolean	검증 중에는 true로 설정됩니다.
validatingFields	object	v7.51.0부터 비동기 검증이 진행 중인 필드를 담습니다.
errors	object	필드 오류를 담은 객체입니다. 오류 메시지를 쉽게 가져올 수 있는 ErrorMessage 컴포넌트도 있습니다.
disabled	boolean	v7.48.0부터 폼이 비활성화되면 true로 설정됩니다. useForm의 disabled 속성으로 폼을 비활성화할 수 있습니다.
isReady	boolean	v7.56.0부터 formState 구독 설정이 준비되면 true로 설정됩니다. 부모의 설정이 끝나기 전에 자식을 렌더링합니다. 구독이 준비되기 전에 자식에서 useForm 메서드(예: setValue)를 사용하면 문제가 발생할 수 있습니다. 자식에서 상태를 갱신하기 전에 폼이 초기화되었는지 isReady 플래그로 확인합니다. const { setValue, formState: { isReady } } = useForm(); // Parent component: ✅ useEffect(() => setValue('test', 'data'), []) // Children component: ✅ useEffect(() => isReady && setValue('test', 'data'), [isReady])

규칙

• 반환된 formState는 Proxy 로 감싸져 있어 렌더링 성능을 높이고 특정 상태를 구독하지 않을 때 불필요한 로직을 건너뜁니다. 따라서 상태 갱신을 활성화하려면 렌더링 전에 반드시 호출하거나 읽어야 합니다.

• formState는 일괄 갱신됩니다. formState를 useEffect에서 구독하려면 의존성 배열에 전체 formState를 넣어야 합니다.

  useEffect(() => {
    if (formState.errors.firstName) {
      // do your logic here
    }
  }, [formState]) // ✅
  // ❌ [formState.errors] will not trigger the useEffect

  import { useForm } from "react-hook-form";
  
  export default function App () {
    const {
      register,
      handleSubmit,
      formState
    } = useForm();
  
    const onSubmit = (data) => console.log(data);
  
    React.useEffect(() => {
      console.log("touchedFields", formState.touchedFields);
    },[formState]); // use entire formState object as optional array arg in useEffect, not individual properties of it
  
  
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("test")} />
        <input type="submit" />
      </form>
    );
  };
  
  

• formState를 구독할 때 논리 연산자에 주의합니다.

  // ❌ formState.isValid is accessed conditionally,
  
  // so the Proxy does not subscribe to changes of that state
  return <button disabled={!formState.isDirty || !formState.isValid} />;
  
  // ✅ read all formState values to subscribe to changes
  const { isDirty, isValid } = formState;
  return <button disabled={!isDirty || !isValid} />;
  

예제

---

CodeSandbox

import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    // Read the formState before render to subscribe the form state through the Proxy
    formState: { errors, isDirty, isSubmitting, touchedFields, submitCount },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("test")} />
      <input type="submit" />
    </form>
  );
}

동영상

---