jihoon87/auto-trade
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: React Query 설정 및 루트 레이아웃 통합

Browse Source 
- QueryProvider 컴포넌트 생성
- React Query DevTools 추가
- 루트 레이아웃에 QueryProvider 래핑
This commit is contained in:
jihoon87.lee
2026-02-04 09:34:54 +09:00
parent c0ecec6586
commit ac292bcf2a
2 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout.tsx
View File

@@ -1,5 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import { QueryProvider } from "@/providers/query-provider";
import "./globals.css"; import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
@@ -27,7 +28,7 @@ export default function RootLayout({
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
{children} <QueryProvider>{children}</QueryProvider>
</body> </body>
</html> </html>
); );

47
providers/query-provider.tsx Normal file
View File

@@ -0,0 +1,47 @@
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";
/**
* [React Query Provider]
*
* 애플리케이션 전역에 React Query 기능을 제공합니다.
* - 서버 상태 관리
* - 자동 캐싱 및 재검증
* - 로딩/에러 상태 관리
* - DevTools 통합 (개발 환경)
*
* @see https://tanstack.com/query/latest
*/
export function QueryProvider({ children }: { children: React.ReactNode }) {
// ========== QueryClient 생성 ==========
// useState로 감싸서 리렌더링 시에도 동일한 인스턴스 유지
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
// ========== 쿼리 기본 옵션 ==========
staleTime: 60 * 1000, // 1분 - 데이터가 신선한 것으로 간주되는 시간
gcTime: 5 * 60 * 1000, // 5분 - 캐시 유지 시간 (이전 cacheTime)
retry: 1, // 실패 시 재시도 횟수
refetchOnWindowFocus: false, // 윈도우 포커스 시 자동 재검증 비활성화
},
mutations: {
// ========== Mutation 기본 옵션 ==========
retry: 0, // Mutation은 재시도하지 않음
},
},
}),
);
return (
<QueryClientProvider client={queryClient}>
{children}
{/* ========== DevTools (개발 환경에서만 표시) ========== */}
<ReactQueryDevtools initialIsOpen={false} position="bottom" />
</QueryClientProvider>
);
}