react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 한다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있는데 react-query는 그러한 문제들도 해결해준다
👍🏻 장점
- 별도의 설정 없이 즉시 사용 가능하다
- 캐싱을 효율적으로 관리해준다
- 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다
- 데이터를 그때그때 업데이트해주고 최대한 빨리 반영한다
- 페이징처리, 지연 로딩 데이터와 같은 성능을 최적화해준다
- 서버 쪽 데이터를 가비지 컬렉션을 이용하여 자동으로 메모리를 관리해준다
- 구조적 공유를 통해 쿼리의 결과를 기억해준다
- 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능하다
🔑 사용법
1. 초기세팅
- 먼저 새로운 QueryClient를 생성한다
const queryClient = new QueryClient(); - 사용할 QueryClientProvider도 import해온 후 적용시킬 컴포넌트들을
<QueryClientProvider>로 감싸준다 - 이때 QueryClientProvider에는 client prop이 필요하다
- 1번 단계에서 만들었던
quryClient를 client prop으로 넘겨준다
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import { ThemeProvider } from "styled-components";
import App from "./App";
import { theme } from "./thems";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);
//create a client
const queryClient = new QueryClient();
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</QueryClientProvider>
</React.StrictMode>
);
2. fetcher 함수 만들기
컴포넌트 파일 내에서 api를 fetch 하지 않고 따로 파일을 만들어서 관리한다
- api.ts 파일 생성하기
- 이 파일에서 생성되는 함수는 항상export해주고 이 페치함수는 josn 데이터의 Promise를 반환해야한다
// src/routes/api.ts
export function fetchCoins() {
return fetch("api주소").then((response) =>
response.json()
);
}3. useQuery hook 사용하기
useQuery hook은 두개의 인자를 필수로 요한다. 하나는 queryKey로 이는 고유식별자 역할을 하고, 나머지 하나는 fetcher 함수이다.
useQuery hook을 사용함으로써 페처함수를 불러오는 것과 로딩상태값, 에러상태 처리 등을 동시에 할 수 있다.
useQuery가 리턴하는 값은 두번째 인자의 페처함수에서 반환된 json값인data,로딩 된 여부를 boolean값으로 리턴해주는isLoading, 에러 상태들을 보여주는isError등 다양한 값들이 있다.
useQuery를 사용하기 전과 후를 비교해보면
const [data, setData] = useState<ICoin[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
const response = await fetch("https://api.coinpaprika.com/v1/coins");
const json = await response.json();
setData(json.slice(0, 100));
setLoading(false);
})();
}, []);
// fetch 메서드를 사용했을 경우const { isLoading, data } = useQuery<ICoin[]>("queryKey이름", fetcher함수명);
// react-query를 사용했을 경우react-query를 사용해서 api 페칭을 하게되면 데이터를 캐시에 저장해 주기 때문에 페이지를 이동해도 화면 전환이 빠른 장점이 있다
또 isLoading, data등 같은 이름을 사용하게 되면 문제가 될 수 있는데,:으로 이름을 새롭게지정해 줄 수 있다
const {isLoading : coinLaoding}
ReactQueryDevtools 사용
이 툴을 사용하면 캐시에 있는 query를 볼 수 있다.
// src/App.tsx
import { ReactQueryDevtools } from "react-query/devtools";
...
function App() {
return (
<>
<GlobalStyle />
<Router />
<ReactQueryDevtools initialIsOpen={true} />
</>
);
}
