"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", img: "img", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "Compound Component 패턴은 React에서 관련 컴포넌트들을 하나로 묶어 사용하기 좋은 패턴이다." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Dialog.Root" }), ", ", _jsx(_components.code, { children: "Dialog.Trigger" }), ", ", _jsx(_components.code, { children: "Dialog.Content" }), "처럼 점 표기법으로 연관 컴포넌트를 그룹화할 수 있으며, Radix UI나 Chakra UI 같은 라이브러리에서 흔히 볼 수 있는 패턴이다."] }), "\n", _jsxs(_components.p, { children: ["그런데 이 패턴을 Next.js의 Server Component에서 사용하면 이상한 문제를 확인할 수 있다. 분명 클라이언트 컴포넌트에서는 잘 동작하던 ", _jsx(_components.code, { children: "NavigationBar.Root" }), "가 Server Component에서는 undefined가 된다."] }), "\n", _jsx(_components.p, { children: "왜 같은 import인데 동작이 다를까에 대해서 다뤄보려고 한다" }), "\n", _jsx(_components.h2, { id: "문제-상황", children: "문제 상황" }), "\n", _jsx(_components.p, { children: "먼저 일반적인 Compound Component 구현을 보자" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// NavigationBar.tsx\n\"use client\";\n\nfunction NavigationBarRoot({ children }) {\n return ;\n}\n\nfunction NavigationBarBar({ children }) {\n return

{children}

;\n}\n\nfunction NavigationBarBrand({ children }) {\n return {children};\n}\n\nconst NavigationBar = Object.assign(NavigationBarRoot, {\n Root: NavigationBarRoot,\n Bar: NavigationBarBar,\n Brand: NavigationBarBrand,\n});\n\nexport default NavigationBar;\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Object.assign" }), "으로 함수 객체에 서브 컴포넌트들을 속성으로 붙이는 방식이다. 클라이언트 컴포넌트에서는 완벽하게 동작한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// ClientPage.tsx\n\"use client\";\nimport NavigationBar from \"@/components/NavigationBar\";\n\nexport default function ClientPage() {\n return (\n \n \n My App\n \n \n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "하지만 layout.tsx 같은 Server Component에서 똑같이 사용하면 문제가 생긴다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// layout.tsx (Server Component)\nimport NavigationBar from \"@/components/NavigationBar\";\n\nexport default function Layout({ children }) {\n return (\n \n {\" \"}\n {/* undefined! */}\n \n \n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "NavigationBar.Root" }), "가 undefined다. 에러 메시지는 \"Cannot read properties of undefined\"다."] }), "\n", _jsx(_components.h2, { id: "왜-이런-일이-발생하는가", children: "왜 이런 일이 발생하는가?" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/01/7d8d9e9e-9779-47e1-b68a-17d2beac8e67.png", alt: "" }) }), "\n", _jsxs(_components.p, { children: ["핵심은 Server Component가 클라이언트 모듈을 ", _jsx(_components.strong, { children: "직접 실행하지 않는다" }), "는 점이다."] }), "\n", _jsxs(_components.p, { children: ["Server Component는 서버에서 렌더링된다. 클라이언트 모듈(", _jsx(_components.code, { children: "\"use client\"" }), "가 붙은 파일)을 import할 때, Next.js는 해당 모듈을 실제로 실행하지 않고 **모듈 참조(Module Reference)**만 생성한다."] }), "\n", _jsx(_components.p, { children: "이 참조는 \"이 컴포넌트는 클라이언트에서 렌더링해야 한다\"는 정보를 담은 placeholder 같은 것이다." }), "\n", _jsxs(_components.p, { children: ["문제는 이 참조가 ", _jsx(_components.strong, { children: "정적 export만 인식" }), "한다는 점이다. ", _jsx(_components.code, { children: "Object.assign" }), "은 런타임에 객체에 속성을 동적으로 추가하는 메서드다."] }), "\n", _jsxs(_components.p, { children: ["정적 분석 시점에는 ", _jsx(_components.code, { children: "NavigationBar" }), " 함수 객체에 ", _jsx(_components.code, { children: ".Root" }), ", ", _jsx(_components.code, { children: ".Bar" }), ", ", _jsx(_components.code, { children: ".Brand" }), "라는 속성이 존재하는지 알 수 없다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-text", children: "# 정적 분석 시점 (빌드 타임)\nexport default NavigationBar → 함수 하나만 보임\n\n# 실제 런타임\nNavigationBar.Root = NavigationBarRoot → 이건 런타임에야 할당됨\n" }) }), "\n", _jsxs(_components.p, { children: ["결과적으로 Server Component에서 ", _jsx(_components.code, { children: "NavigationBar.Root" }), "에 접근하면, 모듈 참조에는 해당 속성이 없으므로 undefined가 반환된다."] }), "\n", _jsx(_components.h2, { id: "잘못된-해결책", children: "잘못된 해결책" }), "\n", _jsxs(_components.p, { children: ["가장 쉬운 해결책처럼 보이는 건 layout.tsx에 ", _jsx(_components.code, { children: "\"use client\"" }), "를 붙이는 것이다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// layout.tsx\n\"use client\"; // 이렇게 하면 동작한다, 하지만...\n\nimport NavigationBar from \"@/components/NavigationBar\";\n// ...\n" }) }), "\n", _jsx(_components.p, { children: "동작은 한다." }), "\n", _jsx(_components.p, { children: "하지만 이 방식은 layout 하위의 모든 컴포넌트가 클라이언트 번들에 포함된다는 의미다." }), "\n", _jsx(_components.p, { children: "Server Component의 이점인 서버 사이드 렌더링, 작은 번들 크기, 데이터 페칭 최적화를 모두 포기하는 셈이다. 단순히 compound 패턴을 쓰고 싶다는 이유로 전체 레이아웃을 클라이언트로 내리는 건 과도한 비용이다." }), "\n", _jsx(_components.h2, { id: "올바른-해결책-named-export-병행", children: "올바른 해결책: Named Export 병행" }), "\n", _jsx(_components.p, { children: "해결책은 간단하다." }), "\n", _jsx(_components.p, { children: "서브 컴포넌트들을 named export로도 내보내면 된다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// NavigationBar.tsx\n\"use client\";\n\nfunction NavigationBarRoot({ children }) {\n return ;\n}\n\nfunction NavigationBarBar({ children }) {\n return

{children}

;\n}\n\nfunction NavigationBarBrand({ children }) {\n return {children};\n}\n\n// Named exports - Server Component에서 사용 가능\nexport { NavigationBarRoot, NavigationBarBar, NavigationBarBrand };\n\n// Compound pattern - Client Component에서 사용 가능\nconst NavigationBar = Object.assign(NavigationBarRoot, {\n Root: NavigationBarRoot,\n Bar: NavigationBarBar,\n Brand: NavigationBarBrand,\n});\n\nexport default NavigationBar;\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/01/2179bdb0-b8d0-4cde-b9fa-96cb1f7663b6.png", alt: "" }) }), "\n", _jsx(_components.p, { children: "Named export는 정적 분석 시점에 모듈의 어떤 것들이 export되는지 명확히 알 수 있다." }), "\n", _jsxs(_components.p, { children: ["Server Component에서 이 모듈을 import하면 ", _jsx(_components.code, { children: "NavigationBarRoot" }), ", ", _jsx(_components.code, { children: "NavigationBarBar" }), ", ", _jsx(_components.code, { children: "NavigationBarBrand" }), "가 각각 별도의 모듈 참조로 인식된다."] }), "\n", _jsx(_components.p, { children: "Server Component에서는 named export를 사용한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// layout.tsx (Server Component)\nimport {\n NavigationBarRoot,\n NavigationBarBar,\n NavigationBarBrand,\n} from \"@/components/NavigationBar\";\n\nexport default function Layout({ children }) {\n return (\n \n \n Tech Blog\n \n {children}\n \n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "Client Component에서는 기존처럼 compound 패턴을 사용할 수 있다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// ClientPage.tsx\n\"use client\";\nimport NavigationBar from \"@/components/NavigationBar\";\n\nexport default function ClientPage() {\n return (\n \n \n \n );\n}\n" }) }), "\n", _jsx(_components.h2, { id: "사용-규칙-정리", children: "사용 규칙 정리" }), "\n", _jsx(_components.p, { children: "Server Component에서는 named export만 사용하고, Client Component에서는 compound 패턴을 사용한다. 이렇게 역할을 분리하면 런타임 참조 문제 없이 두 가지 방식을 모두 유지할 수 있다." }), "\n", _jsxs(_components.p, { children: ["참고로 Radix UI 같은 라이브러리들도 이런 방식으로 dual export를 제공한다. ", _jsx(_components.code, { children: "@radix-ui/react-dialog" }), "를 보면 ", _jsx(_components.code, { children: "Dialog.Root" }), "도 쓸 수 있고, ", _jsx(_components.code, { children: "Root" }), "를 직접 import할 수도 있다. Server Component와의 호환성을 고려한 설계다."] }), "\n", _jsx(_components.h2, { id: "정리", children: "정리" }), "\n", _jsx(_components.p, { children: "Server Component는 클라이언트 모듈을 직접 실행하지 않고 모듈 참조만 생성한다." }), "\n", _jsxs(_components.p, { children: ["이 참조는 정적 export만 인식하기 때문에 ", _jsx(_components.code, { children: "Object.assign" }), "으로 런타임에 붙인 속성은 볼 수 없다."] }), "\n", _jsx(_components.p, { children: "해결책은 서브 컴포넌트들을 named export로 함께 내보내는 것이다. 이렇게 하면 결과적으로 Server Component에서는 named export를, Client Component에서는 compound 패턴을 사용할 수 있다." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };