레이아웃 컴포넌트 생성 및 중첩

Next.js App Router에서 레이아웃 컴포넌트는 단순히 UI를 공유하는 것을 넘어, 애플리케이션의 구조와 성능을 최적화하는 데 핵심적인 역할을 합니다.

3장에서 레이아웃의 기본 개념과 최상위 레이아웃, 중첩 레이아웃 사용법을 간략히 살펴보았습니다.

이번 절에서는 레이아웃 컴포넌트를 더 깊이 이해하고, 실제 프로젝트에서 효율적으로 생성하고 중첩하는 고급 기법을 다룹니다.

먼저 layout.tsx가 어떤 UI를 유지하고, 어떤 콘텐츠를 children으로 넘기는지 확인해 봅니다.

레이아웃 컴포넌트의 본질과 역할

레이아웃 컴포넌트는 app 디렉터리 내의 특정 라우트 세그먼트 폴더 안에 위치한 layout.tsx 파일입니다.

이 파일은 해당 라우트와 그 모든 하위 라우트에 적용되는 공통 UI를 정의합니다.

• UI 재사용 및 일관성 유지: 헤더, 푸터, 사이드바, 내비게이션 바 등 웹사이트의 여러 부분에서 반복되는 UI 요소를 한 곳에서 관리하여 코드 중복을 방지하고 디자인 일관성을 유지합니다.
• 상태 유지: 페이지 이동 시 레이아웃 컴포넌트는 리렌더링되지 않고 상태를 유지합니다. 이는 SPA(Single Page Application)의 장점을 살려 부드러운 사용자 경험을 제공하는 데 기여합니다.
• 서버 컴포넌트 기본값: layout.tsx 파일은 기본적으로 서버 컴포넌트로 동작합니다. 따라서 레이아웃에서 데이터를 페칭하거나, 서버 전용 로직을 안전하게 실행할 수 있습니다.
• 성능 최적화: 레이아웃이 서버에서 렌더링되면서 초기 로딩 시 HTML을 빠르게 전달하고, 변경되지 않는 부분은 캐싱하여 불필요한 클라이언트 사이드 번들 크기를 줄입니다.

주의: 모든 레이아웃 컴포넌트는 반드시 children이라는 prop을 받아야 합니다.

이 children prop을 통해 하위 레이아웃 또는 최종 페이지 컴포넌트의 콘텐츠가 렌더링됩니다.

// 모든 레이아웃 컴포넌트의 기본 형태
export default function MyLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {/* 레이아웃에 고유한 공통 UI */}
      <nav>공통 내비게이션</nav>
      {children} {/* 여기에 하위 콘텐츠가 렌더링됩니다 */}
      <footer>공통 푸터</footer>
    </>
  );
}

레이아웃 중첩의 작동 방식

아래 다이어그램은 폴더가 깊어질수록 layout.tsx가 바깥에서 안쪽으로 감싸지는 순서를 보여줍니다.

App Router에서 레이아웃은 폴더 구조에 따라 자동으로 중첩됩니다.

각 라우트 세그먼트(폴더)에 layout.tsx 파일이 있으면, 해당 폴더의 레이아웃은 그 부모 폴더의 레이아웃 안에 중첩되어 렌더링됩니다.

위 구조에서 /dashboard/settings 경로로 접근하면, 다음과 같은 순서로 레이아웃이 중첩되어 최종 페이지가 렌더링됩니다.

이러한 계층적 중첩은 애플리케이션의 복잡성에 따라 유연하게 UI를 구성할 수 있게 해줍니다.

레이아웃 컴포넌트 생성 실습

이전에 만들었던 대시보드 예제를 바탕으로, 특정 하위 페이지에만 적용되는 중첩 레이아웃을 추가해 보겠습니다.

목표: /dashboard/profile 경로에 사용자 프로필을 표시하는 페이지를 만들고, 이 페이지에만 적용되는 특정 레이아웃을 추가하여 사이드 메뉴를 더 세분화합니다.

import Link from 'next/link';

export default function ProfileLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div style={{ display: 'flex', gap: '20px', padding: '15px', border: '1px dashed orange', borderRadius: '5px', marginTop: '15px' }}>
      <aside style={{ width: '150px', backgroundColor: '#fffbe6', padding: '10px', borderRadius: '5px' }}>
        <h4>프로필 메뉴</h4>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li style={{ marginBottom: '5px' }}>
            <Link href="/dashboard/profile">기본 정보</Link>
          </li>
          <li style={{ marginBottom: '5px' }}>
            <Link href="/dashboard/profile/edit">프로필 편집</Link>
          </li>
          <li style={{ marginBottom: '5px' }}>
            <Link href="/dashboard/profile/security">보안 설정</Link>
          </li>
        </ul>
      </aside>
      <section style={{ flexGrow: 1, backgroundColor: '#fff', padding: '10px' }}>
        {children} {/* 프로필 관련 페이지 콘텐츠가 여기에 들어옵니다 */}
      </section>
    </div>
  );
}

export default function ProfileHomePage() {
  return (
    <div>
      <h3>내 프로필</h3>
      <p>이곳은 사용자 프로필의 기본 정보를 표시하는 페이지입니다.</p>
      <ul>
        <li>이름: 홍길동</li>
        <li>이메일: hong.gildong@example.com</li>
      </ul>
    </div>
  );
}

// ...
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard">대시보드 홈</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/overview">개요</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/profile">프로필</Link> {/* 새 링크 추가 */}
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/analytics">분석</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/settings">설정</Link>
          </li>
        </ul>
// ...

실습 확인: 개발 서버(npm run dev)를 실행한 후, 다음 URL들을 방문하며 레이아웃 중첩을 확인해 보세요.

• http://localhost:3000/dashboard (루트 + 대시보드 레이아웃)
• http://localhost:3000/dashboard/profile (루트 + 대시보드 + 프로필 레이아웃 + 프로필 홈 페이지)
• http://localhost:3000/dashboard/profile/edit (루트 + 대시보드 + 프로필 레이아웃 + 프로필 편집 페이지)

프로필 관련 페이지들에서만 ProfileLayout의 주황색 점선 테두리와 내부 메뉴가 보이는 것을 확인할 수 있습니다.

이는 레이아웃이 폴더 구조에 따라 정확히 중첩되어 적용되고 있음을 의미합니다.

레이아웃에서 데이터 공유

레이아웃은 서버 컴포넌트이므로, 해당 레이아웃이 적용되는 모든 하위 컴포넌트(다른 레이아웃, 페이지 컴포넌트)에서 공통적으로 필요한 데이터를 레이아웃에서 미리 페칭할 수 있습니다.

예를 들어, DashboardLayout에서 사용자 이름을 페칭하여 사이드바와 하위 페이지에서 모두 사용할 수 있습니다.

import Link from 'next/link';

// 데이터 페칭 함수 (서버에서 실행)
async function getUserInfo() {
  // 실제로는 DB에서 사용자 정보를 가져오거나 API 호출
  // 예시를 위해 딜레이 추가
  await new Promise(resolve => setTimeout(resolve, 500));
  return { username: '김넥스트', email: 'next@example.com' };
}

export default async function DashboardLayout({ // async 키워드 추가
  children,
}: {
  children: React.ReactNode;
}) {
  const userInfo = await getUserInfo(); // 서버에서 사용자 정보 페칭

  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 180px)', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
      <aside style={{ width: '200px', padding: '20px', backgroundColor: '#f9f9f9', borderRight: '1px solid #eee' }}>
        <h2 style={{ marginBottom: '15px', color: '#333' }}>대시보드 메뉴</h2>
        <p>환영합니다, {userInfo.username}님!</p> {/* 가져온 데이터 사용 */}
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard">대시보드 홈</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/overview">개요</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/profile">프로필</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/analytics">분석</Link>
          </li>
          <li style={{ marginBottom: '10px' }}>
            <Link href="/dashboard/settings">설정</Link>
          </li>
        </ul>
      </aside>
      <section style={{ flexGrow: 1, padding: '20px', backgroundColor: '#fff' }}>
        {children}
      </section>
    </div>
  );
}

DashboardLayout에서 userInfo를 페칭하면, 이 정보가 해당 레이아웃 내의 모든 자식 컴포넌트(프로필 레이아웃, 대시보드 페이지 등)에 직접 전달되지는 않습니다.

대신 Next.js의 데이터 캐싱 메커니즘 덕분에, 하위 컴포넌트에서 동일 데이터를 다시 요청해도 네트워크 요청 없이 빠르게 재사용할 수 있습니다. (이 부분은 데이터 페칭 장에서 더 자세히 다룹니다.)

레이아웃 컴포넌트의 중첩은 복잡한 웹 애플리케이션의 UI를 모듈화하고, 효율적으로 관리하며, 사용자 경험을 향상시키는 데 매우 중요합니다.

이 개념을 잘 이해하고 적용한다면, 유지보수하기 쉽고 성능 좋은 Next.js 애플리케이션을 구축할 수 있을 것입니다.

실제 프로젝트에서는 루트 레이아웃, 세그먼트별 레이아웃, children 슬롯, 메타데이터와 프로바이더의 위치를 함께 보며 어느 계층에 공통 UI와 설정을 둘지 결정합니다.

레이아웃을 여러 겹으로 나눌수록 중요한 것은 “어디에 둘 것인가”입니다.

유지되어야 하는 UI, 범위가 좁은 설정, 캐시되는 데이터, 클라이언트 프로바이더의 위치를 계층별로 분리해 두면 중첩 구조가 복잡해져도 책임이 흐려지지 않습니다.

레이아웃 계층을 설계할 때는 오래 유지될 UI와 좁은 세그먼트 책임, 서버 데이터 경계, 클라이언트 프로바이더 위치를 분리해서 보면 변경 범위가 작아집니다.

레이아웃 컴포넌트 생성 및 중첩 적용 전에는 서버/클라이언트 경계, 캐싱 조건, 배포 영향을 함께 확인해야 합니다.

마지막으로 layout.tsx 중첩이 공유 UI, children, 데이터 공유 책임을 어떻게 나누는지 확인합니다.