TanStack Query?

TanStack Query Overview

데이터 fetching, caching, updating server state 등에 사용된다.

• 리액트에서 데이터를 fetch할 때 useEffect를 사용하는 방법은 권장되지 않는다.
• 웹이 확장될수록 많은 fetch가 이루어지기 때문이다.
  
  
• TanStack Query를 사용하면 로딩, 캐싱 등을 간단하게 구현 가능하다.
• fetch 횟수를 줄일 수 있다.

install

5버전과 사용 방법에 차이가 있다. 4버전으로 진행했다.
npm i @tanstack/react-query^4

Fetch

QueryClient & QueryClientProvider

QueryClient는 캐시와 상호작용할 때 사용된다. [문서]

QueryClientProvider는 QueryClient를 앱에 연결해주는 역할을 하는 컴포넌트다.
다음과 같이 client를 선언하고, 최상위 컴포넌트를 QueryClientProvider로 감싸 사용하면 된다.
index.tsx

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

const queryClient = new QueryClient()

function App() {
  return <QueryClientProvider client={queryClient}>
    		...
  		 </QueryClientProvider>
}

useQuery

문서
useEffect를 사용하지 않아도 된다.
아래 예시에서 getApi가 response에 대한 json을 반환하는 함수라고 치자.

import { useQuery } from "@tanstack/react-query";
  const { isLoading, data } = useQuery<Interface[]>(["uniqueKey"], getApi);

isLoading은 데이터 전송 상태를 boolean값으로 알려주며, 로딩이 끝나면 data에 데이터가 담기게 된다. 데이터들은 uniqueKey 아래에 저장된다. data를 설명하기 위한 Interface도 별도로 생성해야 한다.

React Query가 캐싱을 빠르게 할 수 있게 되었다. 예를 들어, useEffect()를 이용했을 때는 화면을 벗어났다가 돌아올 때마다 fetch가 진행됐다면, Reqct Query는 fetch했던 것을 기억해서 로딩을 줄여준다. 코드 역시 한참 줄어들게 된다.

Axios?

Axios docs intro
--추가예정--

Axios는 내부적으로 fetch, await까지 가능하다고 한다..눙눙아직 제대로 공부를 안해서 잘 모르겠다...

install

npm i axios

fetch

import axios from "axios";

const instance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/v1/",
});

export const getApitwo = () =>
  instance.get("two/").then((response) => response.data);

• axios.create({})를 사용해서 URL instance를 생성해서 보다 편하고 간결하게 코드 작성이 가능하다.
• instance를 사용하면 get을 해올 때 URL 전체, 혹은 ${BASE_URL}two/ 와 같이 번잡하게 쓰지 않아도 된다.