Skip to content

formState

폼의 상태

formState: Object

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

Return

NameTypeDescription
isDirtyboolean

사용자가 입력 중 하나라도 수정한다면 true로 설정됩니다.

  • 중요: 모든 입력의 기본값을 useForm에 제공해야 hook form이 폼이 변경이 되었는지 비교할 수 있는 단일 소스를 가질 수 있습니다.

    const {
      formState: { isDirty, dirtyFields },
      setValue,
    } = useForm({ defaultValues: { test: "" } });
    

    // isDirty: true
    setValue('test', 'change')
     
    // isDirty: false 왜냐하면 getValues() === defaultValues 이기 때문
    setValue('test', '')

  • 파일 타입 입력은 파일 선택 취소 및 FileList 객체 관리 때문에 애플리케이션 수준에서 관리되어야 합니다.

  • 사용자 정의 객체, 클래스 또는 파일 객체는 지원하지 않습니다.

dirtyFieldsobject

사용자가 수정한 필드를 포함하는 객체입니다. 라이브러리가 defaultValues와 비교할 수 있도록 useForm을 통해 모든 입력의 defaultValues를 제공해야 합니다.

  • 중요: useForm에서 defaultValues를 제공하여, hook form이 각 필드의 변경 상태를 비교할 수 있는 단일 소스를 가질 수 있도록 해야 합니다.

  • Dirty 필드는 전체 폼이 아닌 개별 필드 수준에서 dirty로 표시되므로, Dirty 필드는 폼이 isDirty 상태임을 나타내지 않습니다. 전체 폼 상태를 확인하려면 isDirty를 사용하세요.

touchedFieldsobject사용자가 상호작용한 모든 입력을 포함하는 객체입니다.
defaultValuesobject

useForm의 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도 있습니다.

Rules

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

  • formState는 일괄적으로 업데이트됩니다.useEffect를 통해 formState를 구독하려면 formState를 의존성 배열(optional array)에 포함시켜야 합니다.

    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} />;

Examples

CodeSandbox JS
import React from "react";
import { useForm } from "react-hook-form";


export default function App() {
  const {
    register,
    handleSubmit,
    // 렌더링 전에 formState를 읽어 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>
  );
}

Video

The following video will explain in detail different form states.

지원해 주셔서 감사합니다

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