인프런 커뮤니티 질문&답변

안녕하세요. Next에서 Tanstack-query 를 사용하실 때 궁금한게 있어서 질문드립니다.

QueryClientProvider를 생성하실 때 아래와 같이 진행하신 다음에 layout.tsx 에서 감싸주고 있는데,

QueryClientProvider에 use client를 사용하게 되면 결국 모든 하위 컴포넌트가 클라이언트 컴포넌트가 되는게 아닌가요?

즉, layout.tsx 부터 모든 컴포넌트가 전부 클라이언트 컴포넌트로 사용되는게 맞는건가요...?

'use client';

import React, { ReactNode, useState } from 'react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function RQProvider({ children }: { children: ReactNode }) {
  const [client] = useState(
    new QueryClient({
      defaultOptions: {
        // react-query 전역 설정
        queries: {
          refetchOnWindowFocus: false,
          retryOnMount: true,
          refetchOnReconnect: false,
          retry: false,
        },
      },
    }),
  );

  return (
    <QueryClientProvider client={client}>
      {children}
      {/*  개발 모드일때만 데브툴 사용*/}
      <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} />
    </QueryClientProvider>
  );
}

export default RQProvider;