5장: 컴포넌트와 레이아웃

alpha2025-04-30 01:38

컴포넌트와 레이아웃 시작하기

Next.js 15에서 컴포넌트와 레이아웃은 웹앱 구조를 설계하는 가장 중요한 기초입니다. 각각은 반복되는 UI를 함수처럼 만들어 재사용하거나, 여러 페이지에 공통으로 적용되는 외형을 효율적으로 구성할 때 큰 역할을 합니다. 이 장에서는 Next.js의 앱 디렉터리(app/)를 토대로 컴포넌트와 레이아웃을 실제로 어떻게 활용하는지 살펴봅니다.

컴포넌트의 사용과 구조

Next.js에서 각 페이지와 UI 요소는 실상 모두 컴포넌트입니다. 버튼, 입력창, 네비게이션 바처럼 자주 쓰이는 UI 조각을 컴포넌트로 분리하면, 유지보수나 기능 추가가 훨씬 쉬워집니다. 보통 app/components 폴더를 만들어 관련 컴포넌트 파일을 관리합니다. 예를 들어, 아래와 같이 작성할 수 있습니다.

// app/components/Button.tsx
export default function Button({ children, onClick }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

이런 식으로 만든 컴포넌트는 다양한 페이지에서 들여와 반복 사용이 가능합니다.

레이아웃으로 반복되는 틀 만들기

웹사이트에서 헤더나 사이드바, 푸터처럼 모든 화면에 반복되는 부분을 직접 모든 파일에 복사한다면 번거롭고 오류도 잦아집니다. Next.js 15에서는 app/layout.tsx 파일을 통해 사이트 전체에 적용될 기본 틀을 쉽게 만들 수 있습니다. 이 레이아웃 파일은 각 페이지를 감싸면서 공통 구조와 스타일을 한 번에 적용합니다.

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        <header>My App Header</header>
        <nav>Navigation</nav>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  );
}

이렇게 하면 모든 페이지는 children으로 전달되어, 동일한 레이아웃 안에 자연스럽게 자리잡게 됩니다.

중첩 레이아웃과 확장성

프로젝트가 커지면, 각 섹션별로 다른 레이아웃이 필요할 때도 있습니다. 예를 들어, /dashboard 경로에는 통계용 메뉴와 사이드바가 필요할 수 있습니다. 이때는 app/dashboard/layout.tsx처럼 해당 폴더에 별도의 레이아웃 파일을 추가해, 그 하위의 모든 페이지에만 특화된 구조를 적용할 수 있습니다.

실무에서의 적용 및 베스트 프랙티스

컴포넌트와 레이아웃을 잘 활용하면 코드는 더 읽기 쉽고 깔끔해집니다. 재사용성 높은 컴포넌트는 components/ 폴더에 종류별로 잘 정리하고, 레이아웃은 서비스 전체와, 특정 섹션별로 계층적으로 설계하면 프로젝트 관리가 매우 편리해집니다.

Next.js는 이처럼 현대적인 웹앱의 골격을 쉽고 체계적으로 구성하는 방법을 제공합니다. 이를 익혀두면 확장성 있는 프로젝트 설계에 큰 도움이 될 것입니다.