[🚨 Error 🚨] React-Hook-Form defaultValues 에러

문제가 발생한 배경

그룹 정보를 수정했을 때 그룹 정보를 가져오는 쿼리 키를 무효화해서 새로운 값을 가져오고 있는데 React-Hook-Form의 defaultValues는 변하지 않는 상황이다.

---

문제의 원인 알아보기

현재 코드의 흐름

1. 그룹 정보를 가져와서 폼의 defaultValues로 설정한다.

export default function GroupForm({ groupInfo }: GroupFormProps) {
  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isValid, isDirty },
  } = useForm({
    mode: "all",
    defaultValues: { crewName: groupInfo.crewName, labelColor: groupInfo.labelColor },
    resolver: zodResolver(createGroupSchema),
  });
}

2. 폼의 변경사항을 감지해서 변경사항이 생기면 버튼의 disable을 해제한다.

• isDirty: boolean - 폼의 변경사항을 감지해서 초기 값과 다르면 true를 반환한다.
• dirtyFields: object - 특정 필드의 변경사항을 감지해서 object에 true로 갱신된다.
  예를 들어 age, name이라는 필드가 있고 아무 변경사항이 없으면 dirtyFields에는 빈 객체{}가 반환된다. 만약 age를 변경하면 { age: true } 이런 식으로 특정 필드의 변경사항을 감지한다.

<button type="submit" disabled={!isValid || !isDirty}>저장하기</button>

3. 그룹 정보를 변경하면 그룹 정보를 가져오는 쿼리 키를 무효화한다.

export const useEditGroupInfo = (crewId: number) => {
  const queryClient = useQueryClient();
  const { mutate } = useMutation({
    mutationFn: (data: CreateGroupDataType) => editGroupInfo(crewId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: groupKey.detail(crewId) }); // 쿼리키 무효화
      queryClient.invalidateQueries({ queryKey: groupKey.lists() });
    },
  });

  return { mutate };
};

영상을 보면 위 과정에는 문제가 없다는 것을 알 수 있다. 나는 props로 받는 groupInfo가 변했기 때문에 form의 defaultValues도 변경되는 줄 알았는데 defaultValues의 값은 그룹 정보를 바꾸기 이전을 가리키고 있다.

"defaultValues가 안바뀌었을 때 문제가 되는게 있나요?" 라고 생각 할 수 있는데 isDirty가 defaultValues의 값을 기준으로 하기 때문에 버튼이 disable로 설정되는 문제가 있다.

1. 기존 그룹 명: 부리부리 ➔ defaultValues: { groupName: "부리부리" }
2. 그룹 명 변경 후: 부리부리1 ➔ defaultValues: { groupName: "부리부리" }
3. 다시 그룹 명 변경 시도: 부리부리 ➔ defaultValues가 변하지 않아 다시 그룹 명을 테스트로 바꾸려고 하면 isDirty 옵션 때문에 버튼이 disable 상태로 되어있어 변경할 수 없다는 문제가 있다.

💡 React-Hook-Form의 공식문서를 찾아보니깐 defaultValues는 캐시가 되어 재설정을 하려면 reset api를 사용해야 한다고 나와있다!

---

문제 해결 방법

1. next/router의 reload 사용하기

새로고침이 생겨 그렇게 좋은 방법은 아니지만 혹시라도 다른 방법을 못찾으면 최후의 수단으로 사용해야겠다는 생각을 했다...

2. 공식문서에서 권장하는 reset api 사용하기

• reset api란?
  폼의 전체 값, 혹은 개별 필드의 값을 재설정할 수 있는 api이다.
  react-hook-form reset api 공식 문서

이 방법을 사용하면 새로고침없이 groupInfo가 변경될 때마다 React-Hook-Form의 defaultValues를 최신화할 수 있다!

const {
  register,
  handleSubmit,
  reset,
  control,
  formState: { errors, isValid, isDirty },
} = useForm({
  mode: "all",
  defaultValues: { crewName: groupInfo.crewName, labelColor: groupInfo.labelColor },
  resolver: zodResolver(createGroupSchema),
});

useEffect(() => {
  // groupInfo가 변경될 때 폼을 재설정
  reset({ crewName: groupInfo.crewName, labelColor: groupInfo.labelColor });
}, [groupInfo.crewName, groupInfo.labelColor]);

---

최종 동작 영상

이제 그룹 정보를 변경했을 때 바로 버튼이 disable한 상태가 되고 이전 값으로도 변경할 수 있다!

---

🙃 도움이 되었던 자료들

defaultValues - React Hook Form 공식문서
isDirty, dirtyFields - React Hook Form 공식문서