[React Hook Form] React Hook Form 공부 - 17 (폼 Submission 상태 값과 reset 함수) [7/26 study]

React Hook Form 공부 - 17

 

폼 Submission 상태 값과 reset 함수

React-Hook-Form의 formState에는 폼 Submission 상태 값이 4개가 있는데요.

isSubmitting,
isSubmitted,
isSubmitSuccessful,
submitCount

 

isSubmitting 상태는 submit 버튼을 눌렀을 때고, 

isSubmitted 상태는 submit이 눌러져서 벌써 액션이 취해졌을 때입니다. 

isSubmitSuccessful은 submit이 성공적으로 작동했을 때를 나타내고,

submitCount는 성공적인 submit의 갯수를 나타냅니다.

 

사용 방법은 formState에서 가져오면 됩니다.

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

 

그래서 Submit 버튼의 disabled 코드는 아래와 같이 확장할 수 있습니다.

<button disabled={!isDirty || !isValid || isSubmitting}>Submit</button>

 

그리고, 가장 중요한 reset 함수가 있는데요. 

말 그대로 reset 함수는 폼의 입력 값을 defaultValues 값으로 바꾸는 함수입니다. 

이 reset 함수가 언제 유용하게 쓰이냐면 Submit이 성공했을 때 폼 값을 초기화하는 거죠. 

아니면 직접 reset 버튼을 눌러 유저가 Clear 버튼 누르듯 지금까지 입력한 값을 지울 때 사용하면 됩니다.

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

 

Clear 버튼을 Submit 버튼 다음에 만들겠습니다.

<button disabled={!isDirty || !isValid || isSubmitting}>Submit</button>
<button type="button" onClick={()=>reset()}>Clear</button>

 

위와 같이 Clear 버튼을 직접 만들어도 됩니다. 

아니면 Submit 버튼이 눌러졌을 때 reset() 함수를 실행해도 됩니다. 

onSubmit 함수 안에 넣으면 될 거 같은데요. 아닙니다!!

이럴 경우 useEffect 훅을 이용해야 합니다. 

그리고 isSubmitSuccessful 상태값과 같이 사용해야 합니다.

useEffect(()=>{
  if(isSubmitSuccessful) { 
    reset()
  }
},[isSubmitSuccessful, reset])

 

위와 같이 해야 합니다. 

이제 Submit 버튼을 누르면 reset 함수에 의해 초기화 될겁니다.