Next #04 React Query

React Query

간단하게 말하자면 상태관리 라이브러리라고 할 수 있다.
UseState 로 관리 하는 것 보다는 코드라인 수도 적어지고 가독성도 올라간다.

npm i --save @supabase/ssr @tanstack/react-query

React Query 설정

config/ReactClientProivider.tsx

'use client';

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const queryClient = new QueryClient({});

export default function ReactQueryClientProvider({
  children,
}: React.PropsWithChildren) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

app/layout.tsx

import ReactQueryClientProvider from "config/ReactQueryClientProvider";

export default function RootLayout({ children }) {
  return (
    <ReactQueryClientProvider>
    ...
    </ReactQueryClientProvider>
  )
}