개발자
https://nextjs.org/docs/app/building-your-application/rendering/client-components // 문서내용 Defining multiple use client entry points: You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches). However, "use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle. => 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다. 그런데 첨부한 코드의 동작방식이 이해가 안됩니다. 예상 1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다. 2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는 useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다. 실제 1. HotEventList는 여전히 SSR로 동작한다. 2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다. 제가 어떤 부분을 잘못 이해하고 있는걸까요?
1// Home.tsx
2export default async function Home() {
3 const hot = await getHotEvents();
4
5 return (
6 <main className="w-full max-w-[1200px] p-4 md:p-10 flex flex-col gap-[100px]">
7 <TestComponent>
8 <HotEventList events={hot.payload} />
9 </TestComponent>
10 </main>
11 );
12}
13
14
15// TestComponent.tsx
16"use client";
17
18const TestComponent = ({ children }: { children: React.ReactNode }) => {
19 console.log("TestComponent");
20 return <div>{children}</div>;
21};
22
23
24// HotEventList.tsx
25const HotEventList = ({ events }: {events: SimpleEvent[]}) => {
26
27 return (
28 <section className="flex flex-col justify-center gap-3">
29 ...
30 </section>
31 );
32};
답변 1
인기 답변
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns 이쪽을 보시면 자세한 설명이 나옵니다. <TestComponent> <HotEventList events={hot.payload} /> </TestComponent> 이런식으로 children으로 넘겨주게되면 부모가 client component여도 ssr이 기본이 되고, const TestComponent = ({ children }: { children: React.ReactNode }) => { console.log("TestComponent"); return <div> <HotEventList events={hot.payload} /> </div>; }; 이런식으로 children으로 받지않고 직접 작성하게되면 그 순간부터 HotEventList 컴포넌트는 use client 를 명시적으로 작성하지 않았다고 하더라도 client component로 자동으로 변환됩니다.
익명
작성자
2024년 02월 07일
감사합니다. 제가 공식문서에서 제대로 안읽었군요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 06일
Next.js에서 `"use client"`는 각 개별 파일의 최상위 스코프에서만 사용됩니다. 이로 인해, 'TestComponent.tsx' 파일에서 `"use client"`를 선언하더라도 해당 범위는 TestComponent 컴포넌트에만 적용되며, 그것을 import하여 사용하는 다른 컴포넌트에는 영향을 미치지 않습니다. 따라서 'HotEventList.tsx' 파일에서는 여전히 SSR(Server Side Rendering)이 이루어집니다. 이것이 문서 내용 중 "However, "use client" doesn't need to be defined in every component that needs to be rendered on the client." 부분과 약간 혼동이 있을 수 있습니다. 이 문장은 특정 컴포넌트에서 `"use client"`를 선언한 경우, 그 하위 요소나 모듈들은 자동적으로 클라이언트 사이드 번들에 포함된다는 것을 의미합니다. 하지만 각각의 별도 파일에 대해서는 적용되지 않습니다. 따라서 `HotEventList` 컴포넌트가 CSR(Client Side Rendering) 방식으로 동작하기 원한다면, 해당 컴포넌트가 있는 'HotEventList.tsx' 파일의 상단에 `"use client"`를 추가해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!