https://tanstack.com/query/v3
TanStack Query
Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much
tanstack.com
https://tech.kakaopay.com/post/react-query-1/
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Que
tech.kakaopay.com
https://velog.io/@kandy1002/React-Query-%ED%91%B9-%EC%B0%8D%EC%96%B4%EB%A8%B9%EA%B8%B0
[React-Query] React-Query 개념잡기
React-Query 알고 사용하기 (v5)
velog.io
React Query 장점
1. 캐싱(Caching)
2. Client 데이터와 Server 데이터 간의 분리
npm install react-query
기본 설정하기
"use client";
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
export default function ReactQueryProvider({ children }) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}
layout.tsx에서 만들어놓은 ReactQueryProvider 를 감싸준다.
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import RecoilProvider from "./config/RecoilProvider";
import ReactQueryProvider from "./config/ReactQueryProvider";
const inter = Inter({ subsets: ["latin"] }); //폰트
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ReactQueryProvider>
<RecoilProvider>
<html lang="en">
<body className={inter.className}>
<p>From Layout</p>
{children}
</body>
</html>
</RecoilProvider>
</ReactQueryProvider>
);
}
"use server";
var TODOS: string[] = [];
export const getTodos = async () => {
return TODOS;
};
export const createTodo = async (data: string) => {
//sleep 1초 동안 기다려줌 (로딩 구현 위해서)
await new Promise((resolve) => setTimeout(resolve, 1000));
TODOS.push(data);
return TODOS;
};
"use client";
export default function TodosPage() {
return (
<div>
<h1>TODOS</h1>
{/* TODO를 생성하는 부분 */}
{/* TODO를 보여주는 부분 */}
</div>
);
}
useQuery는 데이터를 가져오는 작업에 사용한다.
"use client";
import { useQuery } from "react-query";
import { getTodos } from "../actions/todo-actions";
export default function TodosPage() {
const todosQuery = useQuery({
queryKey: ["todos"], // 브라우저 딴에서 캐싱할 때 어떤 키값으로 할건지
queryFn: () => getTodos(), //실제로 데이터를 가지고오는 쿼리 함수
});
return (
<div>
<h1>TODOS</h1>
{/* TODO를 생성하는 부분 */}
{/* TODO를 보여주는 부분 */}
{todosQuery.isLoading && <p>Loading...</p>}
{todosQuery.data &&
todosQuery.data.map((todo, index) => <p key={index}>{todo}</p>)}
</div>
);
}
//값 가져올 때 사용하는 useQuery
const todosQuery = useQuery({
queryKey: ["todos"], // 브라우저 딴에서 캐싱할 때 어떤 키값으로 할건지
queryFn: () => getTodos(), //실제로 데이터를 가지고오는 쿼리 함수
});
//데이터를 전송할 때 (데이터 변경) useMutation -create, update, delete 해당
const createTodoMutation = useMutation({
mutationFn: async () => {
if (todoInput === "") throw new Error("TODO를 입력해 주세요");
return createTodo(todoInput);
},
//성공 시
onSuccess: (TODOS) => {
todosQuery.refetch(); //TodosQuery 다시 가져옴
},
//실패 시
onError: (error: any) => alert(error.message),
});
