[React Hook Form] React Hook Form 공부 - 13 (touchedFields, dirtyFields, isDirty 함수 알아 보기) [7/25 study]

React Hook Form 공부 - 13

 

touchedFields, dirtyFields, isDirty 함수 알아 보기

아까 setValue 함수에서 shouldDirty, shouldTouch, shouldValidate 항목에 있는 Touched , Dirty에 대해서 다시 알아 보겠습니다. 

사용자가 폼의 input에 포커스를 한 번이라도 가져갔다면 TouchhedFields 항목에 포함됩니다.

그리고 dirtyFields에는 defaultValues와 다른 값이라면 그 항목은 dirtyFields 항목에 포함되죠. 

그리고 isDirty는 현재의 Dirty 상태를 나타내 주죠. 

사용 방법은 formState에서 각각의 항목을 디스트럭쳐링 해서 써야 합니다.

const {
    register,
    control,
    handleSubmit,
    watch,
    getValues, setValue,
    formState: { errors, touchedFields, dirtyFields, isDirty },
  } = useForm<FormValues>({
    defaultValues: {
      username: "IU",
      age: 0,
      dob: new Date(),
    },
  });

  console.log({touchedFields, dirtyFields, isDirty});

 

실행 결과를 볼까요? 아래와 같이 username 부분에 뭘 추가했습니다.

 

그러면 아래와 같이 콘솔 창에 나옵니다.

 

dirtyFields에 usename 항목이 true로 들어가 있고, 당연히 touchedFields 에도 들어가 있습니다. 

isDirty는 당연히 true입니다. 

이제, username 부분을 defaultValues 값인 "IU"라고 바꾸겠습니다.

그러면 아래와 같이 콘솔 창에 나옵니다.

 

touchedFields는 계속 그 상태이고, dirtyFields와 isDirty 값이 변했네요. 이제 구분이 되실 겁니다.