[React] TanStack Query (React Query v4)

[DrMaemi]

• Github - ssi02014/react-query-tutorial

[DrMaemi]

• react-query에서 기본적으로 서버에서 데이터를 Get 할 때는 useQuery를 사용하지만, post, patch, put, delete와 같이 수정하고자 한다면 이때는 useMutation을 이용한다.
• 결국 axios와 state로 코드를 일일이 작성하는 대신 react-query로 한 번에 작성하는 느낌인 듯. (코드 상으로는 그렇고, 실제로는 캐싱 처리 등의 성능 향상이 주된 목적이다.)

[DrMaemi]

예를 들어 아래와 같이 Tanstack Query를 이용해 data 객체를 가져왔을 때

기존 axios 코드

```tsx axios .get>( `/api/maintenances?page=${page}&c=${searchFilter.cluster ?? ''}&q=${searchFilter.query ?? ''}`, ) .then(({ data }) => { setMaintenances(data.content ?? []) setPage(data.pageable.pageNumber) setTotalElements(data.totalElements) setTotalPages(data.totalPages) }) .catch((error) => { console.error(error) setMaintenances([]) }) .finally(() => { setLoading(false) }) ```

Tanstack query 변경 후 (get)

```tsx const [page, setPage] = React.useState(0) const [searchFilter, setSearchFilter] = React.useState>({}) const { data: data, isLoading } = useQuery({ queryKey: ['maintenanceHistory', searchFilter.cluster, searchFilter.query], queryFn: async () => await getMaintenanceHistory({ page, cluster: searchFilter.cluster, query: searchFilter.query }), }) ```

기존 코드처럼 React state 훅을 사용하고 싶다면.. 아래와 같이 작성해줘야 한다. (useQuery({ ... }) 호출 후 useState, useEffect(Tanstack query로 data 업데이트 감지) 를 사용한다.)

`useState`, `useEffect` 사용

```tsx import React from 'react'; import { useQuery } from 'react-query'; const YourComponent: React.FC = () => { const [page, setPage] = React.useState(0); const [searchFilter, setSearchFilter] = React.useState>({}); const { data, isLoading } = useQuery({ queryKey: ['maintenanceHistory', searchFilter.cluster, searchFilter.query], queryFn: async () => await getMaintenanceHistory({ page, cluster: searchFilter.cluster, query: searchFilter.query }), }); // React 상태로 content와 pageNumber 저장 const [content, setContent] = React.useState([]); const [pageNumber, setPageNumber] = React.useState(0); // 데이터가 로드될 때 React 상태 업데이트 React.useEffect(() => { if (data) { // data.content를 content에 저장 setContent(data.content); // data.pageable.pageNumber를 pageNumber에 저장 setPageNumber(data.pageable.pageNumber); } }, [data]); // 나머지 컴포넌트 로직... return ( ... ) } ```

[DrMaemi]

Tanstack useQuery 훅을 모달 창 열림 여부 등의 state에 대해 조건부로 호출하는 방법

import { useQuery, useIsFetching } from 'react-query';

// ...

const YourModalComponent: React.FC<PropsType> = ({ /* your props */ }) => {
  const isModalOpen = /* 로직에 따라 모달이 열렸는지 여부를 판단 */;
  const isQueryActive = useIsFetching(); // 현재 실행 중인 쿼리의 개수를 반환

  const { data: storages, isLoading } = useQuery<StorageInfo[], Error>({
    queryKey: ['storages'],
    queryFn: async () => await getPurgeableRecoverableDisks("yourHostName"), // 호스트 이름을 전달
    initialData: [],
    enabled: isModalOpen && !isQueryActive, // 모달이 열려 있고, 현재 실행 중인 쿼리가 없을 때만 실행
  });

  // 모달 컴포넌트의 나머지 부분

  return (
    /* 모달 내용 렌더링 */
  );
};