📌소개

강의링크 바로가기

📌배운내용 정리

Link to Doc Tanstack Query

Tanstack Query 는 본래 이름이 React Query 였는데. 어떤 이유에서인지 이름이 Tanstack Query 로 바뀌었다. 저작권 문제인가?

Tanstack Query 사용이유(장점 2가지)

장점 1. - "간결한 코드"

첫번째 장점은 아래와 같이 긴 코드를 1줄로 축약가능하다는 점. 아래 코드를 보면 데이터를 fetch() 해서 가져온 뒤 이를 활용하는 과정 등인데. 딱 봐도 매우 빈번하게 사용될 것이 분명해보인다. 매번 자주 사용할 코드가 아래와 같이 지저분하다면 당연히 압축하고 싶은 마음이 든다.

before code

// Tanstack Query 를 사용하면 아래의 긴~~ 코드를 1줄로 줄일 수 있다. 💖💕😍🤗🤞 
// 추가로 Tanstack Query 는 '캐싱'도 해준다. 즉 한 번 fetch() 했던 데이터를 보유하고 있기 때문에 속도가 빨라진다. 
// file : my-app\src\routes\Home.tsx
export default function Home() {
  const [isLoading, setIsLoading] = useState(true);
  const [rooms, setRooms] = useState<IRoom[]>([]);
  const fetchRooms = async () => {
  const response = await fetch("http://127.0.0.1:8000/api/v1/rooms/");
  const json = await response.json();
  setRooms(json);
  setIsLoading(false);

  };

  useEffect(() => {
      fetchRooms();
  }, []);
  return (
      <Grid mt={10} px={40} columnGap={4} rowGap={5} templateColumns={{
		//... 중략 

after code

파일생성 getRooms() 함수생성

// file : my-app\src\api.ts
// 별도의 api.ts 파일생성하고 getRooms() 함수만들기
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;
}

생성한 getRooms 함수 사용

// file : my-app\src\routes\Home.tsx
import { useQuery } from "@tanstack/react-query";
import { getRooms } from "../api";

export default function Home() {    
	const { isLoading, data } = useQuery<IRoom[]>(["rooms"], getRooms);
  // useQuery 는 isLoading 을 자동으로 제공함
  // useQuery 는 내가 지정한 ["rooms"], 키값으로 getRooms 함수의 return 값을 저장한다. 이를 캐싱이라 한다.
  return (
    <Grid mt={10} px={40} columnGap={4} rowGap={5} templateColumns={{
		// ...중략 😍🤗💖
                                                                    
                                                                    			
	{data?.map((room)=>( 
      // data? 여기에 반드시 '?' 를 추가해줘야 합니다. 왜냐하면 undefined 인 경우도 있을 수 있기 때문에 💖💖💖
            <Room           	
      			imageURL={room.photourl}
                name={room.name}
                rating={room.rating}
                city={room.city}
                country={room.country}
                price={room.price}
            />
        ))}
    </Grid>

장점 2. - "캐싱"

Tanstack Query 는 '캐싱' 기능을 제공한다. 쉽게 말하면 맨 처음 메인페이지에 방문한 유저가 몇차례 페이지 이동을 했다고 가정하자. 그러다가 해당 유저가 되돌아가기 버튼을 눌러서 다시 메인페이지로 돌아올 때 Tanstack Query 는 유저가 최초 홈페이지에 방문했을때 fetch 해온 데이터를 소실하지 않고 보유하고 있다가 그것을 그대로 보여준다. 따라서 한 번 fetch 해온 데이터는 다시 fetch 할 필요가 없다. 그래서 결국 속도가 향상된다. 매우 좋은 점이라 생각한다.

Tanstack Query install

// 참조 https://tanstack.com/query/v4/docs/installation
1. NPM way 🤞

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

2. CDN way 🤞
<script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>

how to use Tanstack Query

1. Tanstack Query 설치

2. import { QueryClient, QueryClientProvider }

3. new QueryClient() 생성

4. QueryClientProvider 컴포넌트로 앱 감싸기

// file : my-app\src\index.tsx
// ... 중략
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}> // 🤗😍💕
      <ChakraProvider theme={theme}>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <RouterProvider router={router} />
      </ChakraProvider>
    </QueryClientProvider> // 🤗😍💕
  </React.StrictMode>
);

📌Grab a Keyword

QueryClient

const client = new QueryClient();

QueryClientProvider

📌Grab a Key Concept

📌한줄평

사실상 필수 아닌가? 무조건 숙지하고 자주 활용해보자. 👍😄🤩😋😍