왜 이렇게 고쳤는가?

사용자 인터랙션에 따른 상태 관리는 복잡성이 빠르게 증가할 수 있는 영역입니다. 리팩토링의 주된 목적은 다음과 같습니다:

• 코드 재사용성: 좋아요와 싫어요 기능을 효율적으로 재사용할 수 있는 Hook을 만들기 위함입니다.
• 상태 관리의 단순화: React Query를 사용하면, 데이터 패치 및 동기화를 훨씬 간결하게 처리할 수 있습니다.
• 에러 핸들링과 최적화: React Query의 useMutation은 비동기 작업의 상태를 효율적으로 관리하고, 성공 및 실패 콜백을 통한 추가 작업을 용이하게 합니다.

작성 코드 및 설명

useMutation 사용

React Query의 useMutation을 사용하여 좋아요와 싫어요 기능을 수행하는 비동기 작업을 정의합니다.

const { mutate: setLike } = useMutation(
  // 좋아요 설정
  (id) => { /* ... */ },
  {
    onSuccess: () => {
      queryClient.refetchQueries(["get-object-list"], { exact: true });
    },
  }
);

const { mutate: setUnLike } = useMutation(
  // 싫어요 설정
  (id) => { /* ... */ },
  {
    onSuccess: () => {
      queryClient.refetchQueries(["get-object-list"], { exact: true });
    },
  }
);

좋아요/싫어요 처리 함수

like 함수를 정의하여, 사용자가 좋아요 혹은 싫어요 버튼을 클릭하면 해당 동작을 수행합니다.

const like = (
  e: React.MouseEvent<SVGElement, MouseEvent>,
  id: any,
  likeCheck: null | number
) => {
  e.stopPropagation();
  if (likeCheck) {
    setUnLike(id);
  } else {
    setLike(id);
  }
};

React Query 최적화

onSuccess 콜백을 사용하여, 좋아요/싫어요 작업이 성공한 경우 관련 쿼리를 새로 고침함으로써 UI를 최신 상태로 유지합니다.

결론

이 리팩토링을 통해 좋아요와 싫어요 기능을 효율적이고 재사용 가능한 방식으로 구현했습니다. React Query의 활용은 상태 관리를 간소화하고 코드의 유지보수성을 향상시키는 좋은 사례입니다. 이러한 패턴은 웹 애플리케이션에서 다양한 사용자 인터랙션을 관리하는 데 유용하게 적용될 수 있습니다.