[React-Hook-Form] 리액트훅폼 isDirty 와 dirtyFields 의 차이

 

React Hook Form 의 formState 에 isDirty 와 dirtyFields 가 있는데 둘의 차이가 무엇인지 궁금해서
화면에서 값을 찍어보며 테스트를 해봤습니다. 알게 된 둘의 차이를 정리해둘게요!

 

✔  개념

 

isDirty와 dirtyFields는 React Hook Form 라이브러리에서 사용되는 용어로, 폼의 입력값이 변경되었을 때를 감지하는 기능을 제공합니다.

 

✔  차이

 

isDirty

isDirty는 전체 폼(form)의 dirty 상태를 나타내는 boolean 값입니다. 폼 내에서 어떤 입력 필드(input field)가 변경되었는지에 관계없이, 한 번이라도 input이 변경되었다면 isDirty는 true를 반환합니다. 

 

dirtyFields

dirtyFields는 객체 형태로, 변경된 입력 필드의 name 과 value 가 저장되어 있습니다. 이 객체는 useForm 훅을 호출하여 반환받은 객체의 watch 메서드를 사용하여 생성됩니다. watch 메서드에 인자로 입력 필드의 이름을 전달하면, 해당 필드의 값을 실시간으로 모니터링하면서 변경이 있을 때마다 dirtyFields 객체를 업데이트합니다.

 

요약!! 

isDirty는 전체 폼이 변경되었는지 여부를 판단, dirtyFields는 변경된 입력 필드들의 상태를 구체적으로 파악할 때 사용

 

✔ 사용방법

예시로 제목, 내용을 입력하는 폼을 만들어서 각각의 필드에 값을 입력했을 때 isDirty 와 dirtyFields 의 값이 어떻게 변하는지 볼게요

아래는 mui 와 react hook form 을 사용한 예시 코드입니다.

 export const WriteBoard: NextPage = () => {
 
 const {
    handleSubmit,
    control,
    formState: { isDirty, dirtyFields },
  } = useForm<IPostBoard>();
  
  return (
    <Stack
      component="form"
      autoComplete="off"
      onSubmit={handleSubmit(submitHandler)}
    >
      <Controller
        render={({ field: { onChange } }) => (
          <TextField
            onChange={onChange}
            label="제목"
            variant="standard"
          />
        )}
        rules={{ required: true }}
        name="title"
        control={control}
      />
      <Controller
        render={({ field: { onChange } }) => (
          <TextField onChange={onChange} label="내용" variant="standard" />
        )}
        rules={{ required: true }}
        name="content"
        control={control}
      />
      <Button type="submit" variant="outlined" color="success">
        저장하기
      </Button>
    </Stack>
  );
};

<화면>

 

 

< 제목, 내용 입력 전 >

isDirty : false

dirtyFields : {}

 

< 제목만 입력>

isDirty : true

dirtyFields : { title: true }

 

<제목, 내용 둘 다 입력>

isDirty : true

dirtyFields : { title: true, content: true }

 

즉, isDirty 는 폼 안에 있는 값 중 하나만 변해도 true 반환,

dirtyFields 는 폼 안에 있는 각 필드의 변화에 따라 필드마다 true 를 반환합니다.

 

✔참고

https://react-hook-form.com/api/useform/formstate