개발자

Next.js v13 React Essentials부분 질문입니다.

2023년 05월 10일조회 573

[카테고리]App Router->React Essentials https://nextjs.org/docs/getting-started/react-essentials 1번문장 Client Components에서 "Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle."라는 문장과 2번문장 Composing Client and Server Components에서 "On the server, React renders all Server Components before sending the result to the client. This includes." 1번문장과 2번문장이 모순된것처럼 느껴집니다. 1번문장을 "use client"를 명시한 file에 import된 하위 자식컴포넌트 역시 Client Components로 간주된다고 이해했는데, 그럼 2번문장과 같이 클라이언트 컴포넌트하위에 있는 "Server Components nested inside Client Components" 역시 클라이언트 컴포넌트로 간주되어서 클라이언트 컴포넌트의 렌더링방식을 따라야하는 것 아닌가요??

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

이국범님의 프로필 사진

문서가 설명을 헷갈리게 적어놨는데 말씀하신 게 맞습니다 부모 : 클라이언트 컴포넌트 ('use client') 자식 : (원래는) 서버 컴포넌트 ('use client' 안적혀 있음) 이렇게 해놓으면 자식 컴포넌트도 클라이언트 컴포넌트로 간주하고 렌더링을 시도합니다

상범님의 프로필 사진

상범

작성자

FE2023년 05월 10일

감사합니다. 초보인데다가 배경지식도 많이없어서 공식문서 읽기가 많이 버겁네요 ㅠㅠ "use client"의 자식으로 서버 컴포넌트를 작성하려면 서버 컴포넌트로도 작동하고 클라이언트 컴포넌트로도 작성하는 컴포넌트여야한다는 국범님의 조언이 아직 이해가 잘 가지않지만, React Essential의 Recommended Pattern: Passing Server Components to Client Components as Props부분처럼 서버컴포넌트를 prop으로 클라이언트 컴포넌트에 넘겨주는 방식으로 사용하면 별문제 없겠죠? (사실 이방식밖에 아직은 모릅니다 ㅠ)

이국범님의 프로필 사진

이국범

FE2023년 05월 10일

"use client"의 자식으로 서버 컴포넌트를 작성하려면 서버 컴포넌트로도 작동하고 클라이언트 컴포넌트로도 작동하는 컴포넌트여야한다 <-- 이 말은 그냥 말 그대로 받아들이면 됩니다. 서버 컴포넌트는 서버에서 렌더링되니 node.js 런타임에서 돌아가겠죠? 그리고 "use client" 의 자식으로 렌더링되면 클라이언트 컴포넌트로 해석되니 웹브라우저에서 렌더링 될 것이고 결국 이 기준을 모두 만족하려면 node.js 런타임에서도 작동하고 웹브라우저 런타임에서도 작동해야 한다는 뜻입니다. 예를들어 fs는 node.js의 전용 모듈이니 fs를 사용하는 서버 컴포넌트는 "use client"의 자식으로 사용할 경우 에러가 발생할 것입니다 그리고 제가 잘못알고 있었던게 있는데 'use client'의 자식으로 비동기 컴포넌트 호출할 수 있습니다 <ExampleClientComponent> <ExampleServerComponent /> <- async function 사용가능 </ExampleClientComponent> 자바스크립트 기반 프로젝트는 그냥 오류없이 되는거같고 타입스크립트는 위에서 언급한 : "해당 반환 형식 'Promise<Element>'는 유효한 JSX 요소가 아닙니다" 에러 발생하는데 <ExampleServerComponent /> 컴포넌트 위에 주석하나 달아주면 클라이언트 사이드 렌더링도 가능합니다 (안되는줄 알았는데 제 착각이었습니다) {/* @ts-expect-error Async Server Component */} 이렇게 하면 <ExampleServerComponent /> 에서 fetch사용할 수 있고 문제없이 렌더링됩니다

커리어리 AI 봇님의 프로필 사진

1번 문장과 2번 문장은 실제로 모순되는 것이 아니라, 다른 관점에서 설명한 것입니다. 이해에 도움을 드리기 위해 두 문장을 자세히 살펴보겠습니다. 1번 문장에서는 "use client"를 정의한 파일에 모든 다른 모듈, 즉 하위 자식 컴포넌트도 클라이언트 번들의 일부로 간주된다고 설명되어 있습니다. 이는 "use client"를 사용하여 클라이언트 컴포넌트를 정의한 파일 내에서 import된 모든 모듈이 클라이언트 번들에 포함된다는 의미입니다. 따라서, 해당 파일에서 import된 하위 자식 컴포넌트 역시 클라이언트 컴포넌트로 간주되며 클라이언트 번들에 포함됩니다. 반면, 2번 문장에서는 "Server Components nested inside Client Components"에 대해 설명하고 있습니다. 서버 컴포넌트는 서버에서 렌더링되고 클라이언트로 결과가 전송되는데, 이러한 구성에서는 서버 컴포넌트가 서버에서 완전히 렌더링된 후에 클라이언트로 전송됩니다. 이는 클라이언트 컴포넌트의 렌더링 방식을 따르지만, 클라이언트 컴포넌트의 일부로 간주되는 것은 아닙니다. 서버 컴포넌트는 서버에서만 실행되며, 클라이언트 컴포넌트의 렌더링에 영향을 주지 않습니다. 결론적으로, "use client"를 사용하여 클라이언트 컴포넌트를 정의한 파일에서 import된 하위 자식 컴포넌트는 클라이언트 번들에 포함됩니다. 하지만 서버 컴포넌트는 서버에서 렌더링되고 클라이언트로 전송되므로 클라이언트 컴포넌트의 렌더링 방식을 따르지만 클라이언트 번들의 일부로 간주되지 않습니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!