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

현재 강의에서 @modal 컴포넌트에 [photoId] / page.tsx 에서 아래 코드를 작성후 hydrationBoundery로 감싼 후 게시글의 사진을 눌르면 모달이 나와야 하는데 아래의 오류가 발생합니다. 도저히 해결하지 못해서 ch3-2를 클론해서 실행시켜보았는데도 똑같이 이런 에러가 나옵니다.



그래서 "use client"컴포넌트로 만들어 준 후
QueryClientProvider 로 감싸주었더니 해결되었습니다.
근본적인 문제가 뭔지 모르겠네요 ㅠㅠㅠ

"use client"
import CommentForm from "@/app/(afterLogin)/[username]/status/[id]/_component/CommentForm";
import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons";
import style from './photoModal.module.css';
import PhotoModalCloseButton
  from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/PhotoModalCloseButton";
import {dehydrate, HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query";
import {getSinglePost} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost";
import {getComments} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getComments";
import SinglePost from "@/app/(afterLogin)/[username]/status/[id]/_component/SinglePost";
import React from "react";
import Comments from "@/app/(afterLogin)/[username]/status/[id]/_component/Comments";
import ImageZone from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/ImageZone";

type Props = {
  params: { id: string }
}
export default async function Default({params}: Props) {
  const {id} = params;

  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({queryKey: ['posts', id], queryFn: getSinglePost});
  await queryClient.prefetchQuery({queryKey: ['posts', id, 'comments'], queryFn: getComments});
  const dehydratedState = dehydrate(queryClient);

  return (
    <div className={style.container}>
      <QueryClientProvider client={queryClient}>
      <HydrationBoundary state={dehydratedState}>
        <PhotoModalCloseButton/>
        <ImageZone id={id} />
        <div className={style.commentZone}>
          <SinglePost id={id} noImage />
          <CommentForm/>
          <Comments id={id} />
        </div>
      </HydrationBoundary>
      </QueryClientProvider>
    </div>
  );
}