[Next.js14 강의] 9강 - 레이아웃 구성 및 적용 방법

이번 강의에서는 Next.js에서 레이아웃을 구성하고 적용하는 방법을 다룹니다. 레이아웃을 사용하면 여러 페이지에서 공통으로 사용되는 UI 요소를 쉽게 관리할 수 있습니다. 이 강의를 통해 효율적인 레이아웃 설정과 유지보수 방법을 학습할 수 있습니다.

 

 

1. 레이아웃이란 무엇인가?

 

레이아웃의 개념

· 레이아웃은 웹 애플리케이션에서 여러 페이지에서 공통적으로 사용하는 UI 구조를 의미합니다. 헤더, 푸터, 사이드바 등이 대표적인 레이아웃 요소입니다.
· 레이아웃을 잘 구성하면 페이지 간 일관성을 유지하고, 코드 중복을 줄이며, 유지보수성을 높일 수 있습니다.

 

레이아웃의 필요성

· 여러 페이지에서 동일한 레이아웃을 사용할 때, 각 페이지에 개별적으로 구성하면 코드가 중복되고 유지보수가 어려워집니다.
· 레이아웃을 통해 이러한 공통 요소를 한 곳에서 관리하면, 수정 사항이 있을 때 간단히 적용할 수 있습니다.

 

 

2. Next.js에서 레이아웃 설정하기

 

기본 레이아웃 구성

· Next.js에서는 레이아웃을 별도의 컴포넌트로 만들어 사용할 수 있습니다. 일반적으로 components 또는 layouts 디렉토리에 레이아웃 컴포넌트를 생성합니다.

 

기본 레이아웃 컴포넌트 예제

// components/Layout.js
import React from 'react';
import Link from 'next/link';

export default function Layout({ children }) {
  return (
    <div>
      <header style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
        <nav>
          <Link href="/">Home</Link> | <Link href="/about">About</Link>
        </nav>
      </header>
      <main style={{ padding: '20px' }}>{children}</main>
      <footer style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
        <p>© 2024 My Website</p>
      </footer>
    </div>
  );
}

 

· Layout 컴포넌트는 헤더, 메인 콘텐츠 영역, 푸터로 구성되어 있으며, children으로 받아온 페이지 콘텐츠를 메인 영역에 렌더링합니다.

728x90

페이지에 레이아웃 적용하기

// pages/_app.js
import Layout from '../components/Layout';
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

 

· pages/_app.js 파일은 Next.js에서 모든 페이지를 감싸는 컴포넌트를 정의합니다. 이 파일에서 레이아웃을 적용하여 모든 페이지에 동일한 레이아웃이 적용되도록 할 수 있습니다.

 

 

3. 페이지별로 다른 레이아웃 적용하기

 

페이지별로 다른 레이아웃 설정 방법

· 때로는 페이지마다 다른 레이아웃을 적용해야 할 때가 있습니다. 이 경우 각 페이지에서 레이아웃을 개별적으로 적용할 수 있습니다.

 

페이지별 레이아웃 적용 예제

// pages/about.js
import Layout from '../components/Layout';
import AnotherLayout from '../components/AnotherLayout';

export default function About() {
  return (
    <AnotherLayout>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </AnotherLayout>
  );
}

 

· About 페이지는 AnotherLayout이라는 다른 레이아웃을 사용하여, 페이지마다 다른 레이아웃을 적용하는 방법을 보여줍니다.

반응형

커스텀 레이아웃 적용하기

// pages/special.js
import Layout from '../components/Layout';

export default function SpecialPage() {
  const useCustomLayout = true;

  if (useCustomLayout) {
    return (
      <div style={{ padding: '50px', backgroundColor: '#ff0' }}>
        <h1>Special Layout</h1>
        <p>This page has a custom layout.</p>
      </div>
    );
  }

  return (
    <Layout>
      <h1>Regular Layout</h1>
      <p>This page uses the default layout.</p>
    </Layout>
  );
}

 

· 특정 조건에 따라 커스텀 레이아웃을 적용할 수 있습니다. useCustomLayout 변수를 사용하여 조건부로 레이아웃을 변경할 수 있습니다.

 

 

4. 글로벌 스타일 및 CSS 적용

 

글로벌 스타일 설정

· 레이아웃을 설정할 때 글로벌 스타일을 적용하여 전체적인 디자인 일관성을 유지할 수 있습니다. Next.js에서는 pages/_app.js 파일에서 글로벌 CSS를 가져올 수 있습니다.

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

SMALL

// pages/_app.js
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

 

· 이 방법으로 모든 페이지에 동일한 스타일이 적용됩니다.

 

모듈식 CSS 적용

· Next.js에서는 CSS 모듈을 통해 페이지나 컴포넌트 별로 독립적인 스타일을 적용할 수 있습니다. 각 컴포넌트는 자체적인 CSS 파일을 가질 수 있으며, 클래스 이름 충돌을 피할 수 있습니다.

// components/Button.js
import styles from './Button.module.css';

export default function Button({ label }) {
  return <button className={styles.button}>{label}</button>;
}

/* components/Button.module.css */
.button {
  padding: 10px 20px;
  background-color: #0070f3;
  border: none;
  color: white;
  cursor: pointer;
}

.button:hover {
  background-color: #005bb5;
}

 

· CSS 모듈을 사용하면 각 컴포넌트에 맞는 스타일을 별도로 관리할 수 있습니다.

 

이번 강의를 통해 Next.js에서 레이아웃을 구성하고 적용하는 방법을 학습했습니다. 레이아웃을 통해 공통 UI 요소를 관리하고, 페이지 간 일관성을 유지하는 방법을 이해할 수 있습니다. 또한 페이지별로 다른 레이아웃을 적용하는 방법과 글로벌 스타일을 설정하는 방법도 배웠습니다.

 

 

- 이전 수업 목록