React Query

서버 상태관리 라이브러리

React Query를 사용하는 이유?

-> 서버 상태관리를 좀 더 쉽게 할 수 있도록 만들어주기 때문이다.

서버 상태: 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들을 의미

• React Query를 사용하면 코드가독성, 캐싱 기능 등의 장점이 있다.

1) fetching : 서버에서 데이터 받아오기
2) caching : 서버에서 받아온 데이터를 따로 보관, 동일한 데이터가 단 시간 내 다시 필요할 때 서버 요청없이 보관된 데이터에서 꺼내쓰기
3) synchronizing : 서버상의 데이터와 보관 중인 캐시 데이터 동일하게 만들기
4) updating : 서버 데이터 변경 용이

Stale-while-revaildate (swr) 전략

신규 데이터가 도착하는 동안 기존 캐싱된 데이터를 사용하도록 하는 전략

---

Query

데이터에 대한 요청

Mutation

데이터를 변경 - 추가, 수정, 삭제

Query Invalidation

기존의 쿼리를 무효화 시킨 후 최신화 시킴

필요한 이유?
가져온 Query는 서버 데이터이기 때문에 언제든지 변경이 있을 수 있다.
이런 이유로 받아온 데이터는 최신 상태가 아닐 수 있기 때문에 무효화 시키고 최신 상태를 가져온다.

---

React Query 사용하기

패키지 설치

yarn add react-query

Provider 설정

• QueryClientProvider
  React Context API를 내부적으로 사용
  QueryClientProvider의 지식으로 있는 모든 컴포넌트들은 캐시 데이터에 접근할 수 있다.
  캐시 데이터는 전역 상태로 볼 수 있다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
 
);

컴포넌트에서 사용하기

import { useQuery } from 'react-query'

function User() {

// useQuery 4️⃣사
  const { data } = useQuery(['user'], fetchUser, {
    select: (user) => user.username, // select를 사용하여 원하는 값을 빼낼 수 있다.
  })
  return <div>Username: {data}</div>
}

---

DevTool 설치 및 사용

패키지 설치: yarn add @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

  <QueryClientProvider client={queryClient}>
    <ReactQueryDevtools initialIsOpen={false} />
    <App />
  </QueryClientProvider>

참고: https://tanstack.com/query/v4/docs/react/devtools