Next.js CSS Modules 사용법: 스타일링 관리 쉽게 하기

작성일 : 2024-07-09

Next.js CSS Modules 사용법: 스타일링 관리 쉽게 하기

Next.js는 React 프레임워크의 기능을 확장한 정적 및 동적 웹 애플리케이션을 위한 인기 있는 도구입니다. 이 글에서는 Next.js 프로젝트에서 CSS Modules를 사용하여 스타일링을 효율적으로 관리하는 방법을 다룰 것입니다. CSS Modules의 장점, 설정 방법 및 활용 예제를 포함하여 Next.js 프로젝트에서 CSS Modules를 최대한 활용하는 방법을 알아보겠습니다.

CSS Modules란?

CSS Modules는 CSS 파일을 모듈화하여 특정 컴포넌트에 대한 스타일을 로컬 스코프로 지정할 수 있게 해주는 시스템입니다. 일반적인 CSS와는 달리, CSS Modules를 사용하면 클래스 네임 충돌을 피할 수 있어 매우 유용합니다. 이를 통해 스타일링의 유지보수성과 가독성을 크게 향상시킬 수 있습니다.

함께 알아볼 CSS Modules의 주요 장점들은 다음과 같습니다:

로컬 스코프: CSS 클래스와 ID가 파일 스코프 내에서만 유효하므로 스타일 충돌을 방지할 수 있습니다.
가독성: CSS와 JavaScript 간의 명확한 분리를 통해 코드를 더 읽기 좋게 만듭니다.
자동 네임스페이싱: 컴파일 단계에서 클래스 이름이 유일한 이름으로 변환되어 글로벌 네임스페이스에서 충돌이 발생하지 않습니다.

Next.js에서 CSS Modules 설정

Next.js 프로젝트에서 CSS Modules를 사용하는 것은 매우 간단합니다. 기본적으로 Next.js는 CSS Modules를 지원하므로, 별도의 설정 없이도 바로 사용이 가능합니다. 다음은 기본 설정 과정입니다:

Next.js 프로젝트 초기화: Terminal에서 다음 명령어를 실행하여 새로운 Next.js 프로젝트를 생성합니다.


bash
npx create-next-app my-project
cd my-project

CSS 파일 생성: 프로젝트 폴더 내에서 원하는 컴포넌트 폴더에 .module.css 확장자가 붙은 CSS 파일을 생성합니다. 예: styles/Home.module.css
CSS 파일 임포트: CSS 모듈을 사용하는 컴포넌트 파일 내에서 CSS 파일을 가져옵니다.


javascript
import styles from './Home.module.css';

클래스 네임 사용: 임포트된 styles 객체를 사용하여 클래스 네임을 지정합니다.


javascript
function HomePage() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>안녕하세요, Next.js!</h1>
    </div>
  );
}

export default HomePage;

다음은 Home.module.css 파일의 예입니다:


css
.container {
  padding: 20px;
  background-color: #f3f3f3;
}

.title {
  color: #333;
  font-size: 2rem;
}

동적 클래스 네임과 CSS Modules

때로는 동적 클래스를 적용해야 할 수도 있습니다. 이럴 경우, JavaScript의 템플릿 리터럴이나 조건부 연산자를 사용하여 CSS Modules를 동적으로 활용할 수 있습니다.


javascript
function HomePage({ isHighlighted }) {
  const containerClass = isHighlighted ? styles.highlightedContainer : styles.container;
  return (
    <div className={containerClass}>
      <h1 className={styles.title}>안녕하세요, Next.js!</h1>
    </div>
  );
}

Home.module.css 파일의 예는 다음과 같습니다:


css
.container {
  padding: 20px;
  background-color: #f3f3f3;
}

.highlightedContainer {
  padding: 20px;
  background-color: #ffeb3b;
}

.title {
  color: #333;
  font-size: 2rem;
}

CSS Modules와 다른 스타일 기법 병행

CSS Modules는 다른 스타일링 기법과 병행하여 사용할 수 있습니다. 예를 들어, 프로젝트 일부에서는 styled-components를 사용하고 다른 부분에서는 CSS Modules를 사용할 수 있습니다. 이 경우, 각각의 사용법을 충돌 없이 효율적으로 적용할 수 있습니다.


javascript
import styled from 'styled-components';
import styles from './Home.module.css';

const StyledButton = styled.button`
  background: palevioletred;
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
`;

function HomePage() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>안녕하세요, Next.js!</h1>
      <StyledButton>클릭하세요</StyledButton>
    </div>
  );
}

결론

Next.js에서 CSS Modules를 사용하여 스타일링을 관리하는 것은 매우 유용합니다. 클래스 이름의 충돌을 피하고 스타일링의 가독성과 유지보수성을 극대화할 수 있는 이 방법을 통해, 더 나은 웹 애플리케이션 개발을 수행할 수 있습니다. 프로젝트에 CSS Modules를 적용해 보면서 그 장점을 직접 경험해보세요.