레이아웃 컴포넌트 만들기
먼저, 모든 페이지에서 공유될 Layout 컴포넌트를 만들어보겠습니다.
- 먼저 components라는 최상위 디렉토리를 생성하세요.
- 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 Modules을 사용할 것입니다.
먼저, components/layout.module.css라는 파일을 다음 내용으로 생성하세요:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}중요: CSS Modules을 사용하려면 CSS 파일 이름은 .module.css로 끝나야 합니다.
이제 components/layout.js 내에서 이 컨테이너 클래스를 사용하려면 다음을 수행해야 합니다:
- CSS 파일을 가져오고 styles와 같은 이름을 할당하세요.
- styles.container를 className으로 사용하세요.
components/layout.js 파일을 열고 다음 내용으로 바꿔주세요:
import styles from './layout.module.css';
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
이제 http://localhost:3000/posts/first-post에 접속하면 텍스트가 중앙에 위치한 컨테이너 내부에 있는 것을 확인할 수 있습니다.
자동으로 고유한 클래스 이름 생성하기
이제 브라우저의 개발자 도구에서 렌더링된 div의 클래스 이름을 살펴보면 layout_container__...와 같은 클래스 이름이 생성된 것을 볼 수 있습니다.
이것이 CSS Modules의 동작 원리입니다. CSS Modules를 사용하는 한 클래스 이름 충돌에 대해 걱정할 필요가 없습니다.
뿐만 아니라 Next.js의 코드 분할 기능은 CSS Modules에서도 작동합니다. 각 페이지마다 최소한의 CSS만 로드되도록 보장하며 이로 인해 번들 크기가 줄어듭니다.
CSS Modules는 빌드 시점에 JavaScript 번들에서 추출되어 자동으로 .css 파일을 생성하며, 이 파일은 Next.js에 의해 자동으로 로드됩니다.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] NextJS - Assets, Metadata, and CSS #9 (0) | 2023.08.17 |
|---|---|
| [공식문서] NextJS - Assets, Metadata, and CSS #8 (0) | 2023.08.17 |
| [공식문서] NextJS - Assets, Metadata, and CSS #6 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #5 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #4 (0) | 2023.08.15 |
