query provider 생성
- 리액트 쿼리 사용 시 app.jsx에서
QueryClientProvider로 감싸줬던것과 똑같음! provider.tsx파일 따로 만들고, 거기서children을 props로 받아 children을QueryClientProvider로 감싸주는 방식.- root
layout에서는 provider파일을 감싸주는 과정 필요(QueryProvider) - ⭐️
"use client"필요 : 클라이언트 컴포넌트에서 리액트 쿼리가 실행되기 때문
// ✅ provider.tsx - app폴더의 하위 (root)
"use client";
import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const QueryProvider = ({ children }: React.PropsWithChildren) => {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
export default QueryProvider;
// ✅ layout.tsx - app의 하위 (root)
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import QueryProvider from "./provider";
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 (
<html lang="en">
<body className={inter.className}>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/blog">Blog</a>
</nav>
<QueryProvider>{children}</QueryProvider>
</body>
</html>
);
}
꾸준히 성장하는 우상향 개발자