Skip to content
♥

formState

폼 상태

</> formState: Object

이 객체는 폼 전체의 상태 정보를 담고 있습니다. 폼 애플리케이션에서 사용자의 상호작용을 추적하는 데 도움을 줍니다.

반환값

이름타입설명
isDirtyboolean사용자가 입력값을 수정한 후 true로 설정됩니다.
  • 중요: useForm에서 모든 입력값의 defaultValues를 제공해야 합니다. 그래야 훅 폼이 폼이 더러워졌는지 비교할 수 있는 단일 진실 공급원(single source of truth)을 가질 수 있습니다.
    const {
      formState: { isDirty, dirtyFields },
      setValue
    } = useForm({ defaultValues: { test: "" } })
    

    // isDirty: true ✅
    setValue('test', 'change')
    

    // isDirty: false because there getValues() === defaultValues ❌
    setValue('test', '')
  • 파일 타입 입력은 파일 선택 취소와 FileList 객체 때문에 앱 레벨에서 관리해야 합니다.
  • 커스텀 객체, 클래스 또는 파일 객체는 지원하지 않습니다.
dirtyFieldsobject사용자가 수정한 필드가 담긴 객체입니다. useForm을 통해 모든 입력값의 defaultValues를 제공해야 합니다. 그래야 라이브러리가 defaultValues와 비교할 수 있습니다.
  • 중요: useForm에서 defaultValues를 제공해야 합니다. 그래야 훅 폼이 각 필드의 더러움 상태를 비교할 수 있는 단일 진실 공급원을 가질 수 있습니다.
  • 더러운 필드는 isDirty formState로 표현되지 않습니다. 더러운 필드는 전체 폼이 아닌 필드 레벨에서 더러운 것으로 표시되기 때문입니다. 전체 폼 상태를 확인하려면 isDirty를 사용하세요.
touchedFieldsobject사용자가 상호작용한 모든 입력값이 담긴 객체입니다.
defaultValuesobjectuseForm의 defaultValues 또는 reset API를 통해 업데이트된 defaultValues에 설정된 값입니다.
isSubmittedboolean폼이 제출된 후 true로 설정됩니다. reset 메서드가 호출될 때까지 true 상태를 유지합니다.
isSubmitSuccessfulboolean폼이 런타임 오류 없이 성공적으로 제출되었음을 나타냅니다.
isSubmittingboolean폼이 현재 제출 중이면 true, 그렇지 않으면 false입니다.
isLoadingboolean폼이 현재 비동기 기본값을 로딩 중이면 true입니다.
  • 중요: 이 속성은 비동기 defaultValues에만 적용됩니다.
    const {
      formState: { isLoading }
    } = useForm({
      defaultValues: async () => await fetch('/api')
    })
submitCountnumber폼이 제출된 횟수입니다.
isValidboolean폼에 오류가 없으면 true로 설정됩니다.
  • setError는 isValid formState에 영향을 미치지 않습니다. isValid는 항상 전체 폼 유효성 검사 결과에 따라 결정됩니다.
isValidatingboolean유효성 검사 중이면 true로 설정됩니다.
validatingFieldsboolean비동기 유효성 검사를 받고 있는 필드를 캡처합니다.
errorsobject필드 오류가 담긴 객체입니다. 오류 메시지를 쉽게 가져올 수 있는 ErrorMessage 컴포넌트도 있습니다.
disabledbooleanuseForm의 disabled 속성을 통해 폼이 비활성화되면 true로 설정됩니다.
규칙

  • 반환된 formState는 렌더링 성능을 향상시키고 특정 상태가 구독되지 않았을 때 추가 로직을 건너뛰기 위해 Proxy로 감싸져 있습니다. 따라서 상태 업데이트를 활성화하려면 렌더링 전에 이를 호출하거나 읽어야 합니다.

  • formState는 일괄적으로 업데이트됩니다. useEffect를 통해 formState를 구독하려면 전체 formState를 옵셔널 배열에 넣어야 합니다.

    useEffect(() => {
      if (formState.errors.firstName) {
        // 여기에 로직을 추가하세요
      }
    }, [formState]) // ✅
    // ❌ [formState.errors]는 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가 조건부로 접근되므로,
    

    // Proxy가 해당 상태의 변경을 구독하지 않습니다
    return <button disabled={!formState.isDirty || !formState.isValid} />;
    

    // ✅ 모든 formState 값을 읽어 변경을 구독합니다
    const { isDirty, isValid } = formState;
    return <button disabled={!isDirty || !isValid} />;

예제

CodeSandbox JS
import React from "react";
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>
  );
}

비디오

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

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.