Wed Oct 1 9:26 PM(ing : 0s)
✏️ API 성능과 개발 생산성 개선을 위한 React Query 리팩토링
React Query는 TanStack(구 React Query 팀)에서 개발한 React용 데이터 패칭 및 상태 관리 라이브러리.클라이언트에서 직접 서버 데이터를 관리하는 데 드는 복잡한 로직을 대폭 줄여주며, 캐싱, 로딩 상태 처리, 데이터 동기화, 백그라운드 업데이트 등 다양한 기능을 기본적으로 제공한다.주로 REST API 또는 GraphQL과 함께 사용되며, 컴포넌트 기반의 선언적 개발 패턴에 최적화되어 있다. React Query는 러닝 커브가 낮고 직관적인 API 덕분에 소규모 프로젝트부터 대규모 애플리케이션까지 널리 사용되며, 개발 생산성과 사용자 경험을 모두 향상시키는 강력한 도구로 자리잡고 있다.
React Query를 도입한 이유axios만으로 데이터를 요청하고 useState, useEffect 조합으로 상태를 관리했을 때 생기는 불편사항- 데이터 요청 시 로딩 상태를 일일이 관리해야 함- 삭제나 수정 같은 변화가 있을 때, 리스트를 수동으로 다시 불러와야 함- 컴포넌트마다 동일한 데이터를 요청해도, 캐싱이 없어 중복 호출 발생- 재사용성, 유지보수가 떨어짐
React Query로 해결한 점React Query를 도입하면서 다음과 같은 효율적인 개발 환경 구축- useQuery, useMutation 훅을 사용해 간결하고 선언적인 코드 작성
export const GetGroupId = ({ customerId }: GetGroupIdProps) =>
  useQuery({
    queryKey: [GET_ENTITYGROUP_API, customerId],
    queryFn: () => accountAPI.getGroupId({ customerId }),
    enabled: false,
    select: (data) => data.data.id.id,
  });
- 서버 데이터 변경 시 invalidateQueries로 자동으로 최신 데이터 반영
export const useDeleteAsset = ({ onClose }: { onClose: () => void }) => {
  const queryClient = useQueryClient();
  const { token } = useRecoilValue(userInfoRecoil);

  const deleteMutate = useMutation({
    mutationFn: ({ assetType, id }: { assetType: string; id: string }) =>
      assetsAPI.deleteAsset({ assetType, assetId: id, token }),
    onSuccess: (data) => {
      if (data.request.status !== 200) throw new Error("error");

      queryClient.invalidateQueries({
        queryKey: [GET_ALLASSETS],
        refetchType: "all",
      });
      queryClient.invalidateQueries({
        queryKey: [GETASSETS],
        refetchType: "all",
      });

      onClose();
    },
  });

  return deleteMutate;
};
- 동일한 쿼리는 자동 캐싱되어 성능 개선
// constant.ts
export const KIDS_DDC = "KIDS_DDC";
-> 같은 query key를 사용할 경우 자동 캐싱
- Devtools를 통해 API 상태, 캐시 상태를 실시간 시각화