트러블 슈팅

• 문제 상황
  Next.js typescript 프로젝트 세팅중
  react query의 <QueryClientProvider/>를 별도의 라는 component로 분리하고 <Providers/>를 layout.tsx에 를 넣었더니 에러가 발생

문제 코드

// layout.tsx
import Providers from "@/components/Providers/Providers";
import { PropsWithChildren } from "react";

const ProvidersLayout = ({ children }: PropsWithChildren) => {
  return (
    <div>
      <Providers>{children}</Providers>
    </div>
  );
};

export default ProvidersLayout;

// Providers.tsx

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

const queryClient = new QueryClient();

const Providers = ({ children }: PropsWithChildren) => {
  return (
    <div>
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools />
      </QueryClientProvider>
    </div>
  );
};

export default Providers;

• 해결 방법
  <QueryClientProvider/>가 만들어진 component가 아니라 실제로 사용되는 component로 가서 "use client"를 가장 상단에 선언해주면 된다. 여기서는 그러니까 layout.tsx에서 해주면 된당!

해결된 코드

// layout.tsx

"use client";

import Providers from "@/components/Providers/Providers";
import { PropsWithChildren } from "react";

const ProvidersLayout = ({ children }: PropsWithChildren) => {
  return (
    <div>
      <Providers>{children}</Providers>
    </div>
  );
};

export default ProvidersLayout;

리뷰

진영 튜터님이 "use client" 오류를 자주 볼거라고 했는데, 이렇게 빨리 볼 줄은 몰랐다. 나중에 또 까먹을까봐 여기다 적어둠!!