반응형
React Query란?
React Query는 비동기 상태 관리 라이브러리입니다.
React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다.
React Query 장점
1. 적은 보일러 플레이트 코드
2. 캐싱
3. 중복 요청 방지
4. 오래된 데이터 업데이트
5. 로딩, 에러, 데이터 결과 처리가 쉽습니다.
useQuery를 이용해서 직관적으로 사용할 수 있고, 보일러플레이트 코드 작아서 사용하기 간편합니다.
또, 캐시를 이용해서 데이터를 가지고 있어서 성능이 우수하고, 로딩 및 에러 처리 하기가 쉽습니다.
첫 번째 API 호출 시에 데이터를 캐시에 가지고 있습니다.
두 번째 동일한 API 호출 시 캐시에 가지고 있는 데이터를 즉시 반환합니다.
그 이후 다시 데이터를 조회한 후 변경된 데이터가 있으면 자동으로 업데이트를 합니다.
Next.js에서 React Query 사용법
react query 설치
npm i react-query
components/provider/query-provider.tsx
"use client";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query"
import React, {useState} from "react";
export const QueryProvider = ({children}: {
children: React.ReactNode;
}) => {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
)
}
app/layout.tsx
import './globals.css'
import {QueryProvider} from "@/components/providers/query-provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<QueryProvider>
{children}
</QueryProvider>
</body>
</html>
)
}
page.tsx
const Page = () => {
const getTodo = async () => {
const res = await fetch("https://dummyjson.com/products");
return await res.json();
}
const query = useQuery('todos', getTodos)
return (<ul>
{query.data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>)
}728x90
반응형