[React] React Query | TanStack Query

TanStack Query(React Query) 사용하기

편의상 ReactQuery라고 부를텐데 이 reactQuery를 이용해서 서버 fetch를 더 간단하고 편리하게 할 수 있다.

 

https://tanstack.com/query/latest

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

 

 

TanStack Query 설치하기

$ npm i @tanstack/react-query

 

src/index.tsx 파일에 QueryClient 임포트하고 사용하기

import { QueryClient } from "@tanstack/react-query";

const client = new QueryClient();

 

 

그리고 애플리케이션을 Query Client Provider로 감싼다. 

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const client = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={client}> // QueryClientProvider로 감싼 후 client 설정
      <ChakraProvider theme={theme}>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <RouterProvider router={router} />
      </ChakraProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

먼저 QueryClientProvider를 먼저 임포트해주고 root를 감싼다.

client 설정은 QueryClient()를 받은 client로 설정해 준다.

 

 

---

reactQuery는 API로부터 fetch한 모든 데이터를 캐싱하게 하는 이점도 있다.

캐시(cache)?

• 동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요한 일일때, 결과를 빠르게 이용하고자 성능이 좋은 혹은 가까운 곳에 저장하는 것
• 즉 캐시는 컴퓨터의 성능을 향상 시키기 위해 사용되는 메모리를 말한다
• 주기억장치와 CPU 사이에 위치하고, 자주 사용하는 데이터를 기억한다

예를 들어, 한번 접속한 웹 사이트에 동일한 브라우저로 다시 접속할 때 용량이 큰 이미지나 비디오는 다시 받아오지 않고 브라우저 캐시에 저장해 놨다가 동일하게 가져다 쓸 수 있다.
이를 통해 훨씬 빠르게 웹 사이트의 컨텐츠를 볼 수 있다.
📝 이처럼 캐시를 사용하면 과거에 계산한 데이터를 효율적으로 재사용할 수 있는 것

요컨대, 페이지를 떠났다가 다시 돌아와도 이전에 fetch한 데이터들을 기억해주는 것이다. 한 번 fetch했기 때문에 또 다시 fetch해야 하는 불필요한 오버헤드를 막을 수 있다.

 

 

api.ts파일에 fetch하는 부분을 담는다.

📁 src/api.ts

const BASE_URL = "http://127.0.0.1:8000/api/v1"

export async function getRooms() {
    const response = await fetch(`${BASE_URL}/rooms/}`);
    const json = await response.json();
    return json;
}

이제 모든 fetch는 api.ts파일에서만 이루어지는 것이다.

 

이제 useQuery라는 Hook을 가져와 사용할텐데 chakra가 아닌 react-query에서 가져오는 uesQuery이다.

const { isLoading, data} = useQuery(["캐싱관리key값"], fetch함수);

query에는 일종의 Key같은 것을 만들어줘야 하는데 이 key는 fetch한 결과물을 기억하는 캐싱 작업에 사용된다.

여기서 key 는 array여야 하고 유니크해야 한다. 

fetch함수를 입력할 때는 '함수()' 형태로 입력하지 않도록 주의한다. '함수' 이름만 입력해야 useQuery가 스스로 함수를 호출할 수 있다.

const { isLoading, data} = useQuery(["rooms"], getRooms);

isLoading : 함수를 통한 fetching이 로딩중인지 아닌지 알려준다.

data : 데이터가 준비되었는지 아닌지 알려준다.

받아온 데이터를 rooms라는 이름의 Key로 캐시 메모리에 저장한다.

 

타입스크립트까지 적용해준 코드

const { isLoading, data} = useQuery<IRoom[]>(["rooms"], getRooms);

 

그리고 data를 map하여 방 정보를 하나씩 보여준다.

{data?.map((room) => (
    <Room
      // imageUrl={room.photos[0].file}
      imageUrl={
        room.photos[0]?.file ??
        `https://source.unsplash.com/random/450x$`
        }
      name={room.name}
      rating={room.rating}
      city={room.city}
      country={room.country}
      price={room.price}
    />
))}

data뒤에 ?를 붙여주면 오류를 해결할 수 있다.