개발/Next.js

[Docs] CSS 스타일링 & Layout 컴포넌트

yoosmg 2023. 5. 7. 03:01

CSS Styling

index 페이지(http://localhost:3000)에는 이미 몇 가지 스타일이 있다. 파일 구조를 보면, styles 폴더안에 글로벌 스타일시트(globals.css)와 CSS Module(Home.module.css)이라는 두 개의 CSS 파일이 존재한다.

CSS Module

Next.js에는 .module.css 확장자를 사용하는 CSS Module을 기본 제공한다. CSS Module은 고유한 클래스 이름을 자동으로 생성하여 CSS를 로컬로 범위 지정한다. 따라서 충돌에 대한 걱정 없이 여러 파일에서 동일한 클래스 이름을 사용할 수 있다. 이러한 동작 덕분에 CSS Module은 컴포넌트 수준 CSS를 포함하기에 이상적인 방법이다.

 

Layout 컴포넌트

먼저 모든 페이지에서 공유할 Layout 컴포넌트를 만들어 보자.

components라는 최상위 디렉터리를 만들고 내부에 다음 내용으로 layout.js라는 파일을 만든다:

export default function Layout({ children }) {
  return <div>{children}</div>;
}

 

그런 다음 pages/posts/first-post.js를 열고 Layout을 임포트한 다음 가장 바깥쪽 컴포넌트로 만든다:

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

 

 

CSS 추가하기
Layout 컴포넌트에 몇 가지 스타일을 추가해보자.

React 컴포넌트에서 CSS 파일을 임포트 할 수 있게 해주는 CSS Module을 사용하려고 한다.

다음 내용으로 components/layout.module.css라는 파일을 생성합니다.

파일명은 꼭 .module.css.로 끝나야 한다.

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

 

components/layout.js 내에서 이 container 클래스를 사용하려면, 파일 상단에 이름을 정해 (예시: styles) CSS파일을 임포트하고 styles.container를 className으로 사용한다.

import styles from './layout.module.css';

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

 

 

고유한 클래스 이름 자동 생성

이제 브라우저의 개발 도구에서 HTML을 살펴보자.

레이아웃 컴포넌트가 렌더링한 div의 클래스 이름이 layout_container__어쩌고 임을 알 수 있습니다:

 

이것이 CSS Module의 기능이다.

자동으로 유니크한 클래스명을 생성하기 때문에 이름 충돌에 대해 걱정하지 않아도 된다.

Next.js의 코드 분할 기능은 CSS Module에서도 작동합니다.

각 페이지에 최소한의 CSS만 로드되도록 하여 번들 크기는 더 작아진다.

 

CSS Module은 빌드 시에 JavaScript 번들에서 추출되어 Next.js에서 자동으로 로드되는 .css 파일을 생성한다.