서버 컴포넌트를 지키는 마지막 방어선 컴포지션 패턴

"use client";

import { useState } from "react";
import { UserInfo } from "./user-info"; // 서버 컴포넌트라 import 불가!

export function SideMenu() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <UserInfo />
      <div>
        <button type="button" onClick={() => setOpen((prev) => !prev)}>
          toggle
        </button>
        <div>...</div>
      </div>
    </>
  );
}

이 규칙의 유일한 예외는 바로 'use server'가 붙은 ‘서버 펑션(Server Functions)’ 뿐입니다.

제약 2 암묵적인 클라이언트 번들 포함
#

또 한 가지 중요한 점은, 한 파일에 'use client'를 선언하면, 그 파일이 불러오는 모든 자식 모듈들까지 전부 클라이언트 번들에 포함된다는 점인데요.

그래서 그 컴포넌트들은 모두 클라이언트 컴포넌트로서 동작할 수 있어야만 하는, 암묵적인 규칙이 생기는 것입니다.

두 가지 해결 전략
#

이러한 제약 속에서 서버 컴포넌트 중심의 설계를 지키려면, 클라이언트 컴포넌트를 효과적으로 분리하고 독립시켜야 하는데요.

여기에는 크게 두 가지 방법이 있습니다.

첫 번째 방법 컴포넌트 트리의 끝을 클라이언트 컴포넌트로 만들기
#

가장 간단한 방법은 컴포넌트 트리의 가장 말단, 즉 ‘잎(leaf)‘에 해당하는 부분만 클라이언트 컴포넌트로 만드는 건데요.

다른 말로 하면, 'use client' 경계선을 최대한 아래쪽으로 유지하는 전략입니다.

예를 들어 검색창이 있는 헤더를 만든다면, 헤더 전체가 아니라 상호작용이 필요한 ‘검색창’ 부분만 클라이언트 컴포넌트로 분리하는 방식이거든요.

이렇게 하면 헤더 자체는 서버 컴포넌트로 유지할 수 있습니다.

// header.tsx
import { SearchBar } from "./search-bar"; // 클라이언트 컴포넌트

// 헤더 자체는 서버 컴포넌트로 유지
export function Header() {
  return (
    <header>
      <h1>My App</h1>
      <SearchBar />
    </header>
  );
}

두 번째 방법 컴포지션 패턴 활용하기
#

하지만 어쩔 수 없이 상위 컴포넌트를 클라이언트 컴포넌트로 만들어야 할 때도 있거든요.

바로 이럴 때 ‘컴포지션 패턴’이 아주 강력한 해결책이 됩니다.

핵심 아이디어는 이렇습니다.

클라이언트 컴포넌트 파일 안에서 서버 컴포넌트를 직접 import 할 수는 없지만, children 같은 props를 통해 서버 컴포넌트를 ‘주입’받는 것은 완벽하게 가능하거든요.

앞서 에러가 났던 <SideMenu> 코드를 컴포지션 패턴으로 다시 작성해 보겠습니다.

side-menu.tsx (클라이언트 컴포넌트)

"use client";

import { useState } from "react";

// `children` props를 통해 서버 컴포넌트를 전달받을 수 있습니다.
export function SideMenu({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      {children}
      <div>
        <button type="button" onClick={() => setOpen((prev) => !prev)}>
          toggle
        </button>
        <div>...</div>
      </div>
    </>
  );
}

page.tsx (서버 컴포넌트)

import { UserInfo } from "./user-info"; // 서버 컴포넌트
import { SideMenu } from "./side-menu"; // 클라이언트 컴포넌트

export function Page() {
  return (
    <div>
      {/* 클라이언트 컴포넌트의 자식으로 서버 컴포넌트를 전달! */}
      <SideMenu>
        <UserInfo />
      </SideMenu>
      <main>{/* ... */}</main>
    </div>
  );
}