[CSS] CSS Module: 스타일링을 안전하고 효율적으로 🎨

CSS Module 톺아보기! 🎨

CSS Module은 CSS의 범위를 제한하고, 컴포넌트 기반 개발 환경에서 스타일 충돌을 방지하는 강력한 도구입니다. 스타일 관리가 복잡한 프로젝트에서 CSS Module은 개발자의 삶을 크게 개선해 줄 수 있어요. 이번 글에서는 CSS Module이 무엇인지, 어떻게 사용하는지, 실무에서 어떻게 활용할 수 있는지 자세히 알아보겠습니다.

---

CSS Module이란? 🤔

CSS Module은 CSS 클래스 이름과 선택자의 범위를 컴포넌트 단위로 제한하는 CSS 파일입니다. CSS Module을 사용하면 클래스 이름 충돌 문제를 방지하고, 컴포넌트 기반 스타일링을 효율적으로 관리할 수 있어요.

 

주요 특징

• 로컬 스코프: 각 클래스 이름이 고유해져 다른 컴포넌트와 충돌하지 않음
• 컴포넌트 기반 스타일링: 스타일링도 컴포넌트와 함께 관리 가능
• 가독성과 유지보수성 향상: 코드가 깔끔하고 관리하기 쉬워짐

---

CSS Module 기본 사용법 🛠️

(1) 설치 및 준비

CSS Module은 Webpack 기반의 React 프로젝트에서 바로 사용할 수 있어요. Webpack 설정에서 CSS Module을 활성화해야 합니다.

 

Webpack 설정

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/, // .module.css 파일만 처리
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true, // CSS Module 활성화
            },
          },
        ],
      },
    ],
  },
};

 

(2) 예제: 기본 사용

1. CSS 파일 작성

Button.module.css

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #2980b9;
}

 

2. React 컴포넌트에서 사용

Button.js

import styles from "./Button.module.css";

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

export default Button;

결과

• 클래스 이름은 Webpack에 의해 button_Button__2x4Wg와 같이 고유한 해시 값이 포함된 형태로 변환됩니다.
• 다른 컴포넌트에서 동일한 클래스 이름을 사용해도 충돌하지 않아요.

---

CSS Module의 다양한 기능 🌟

1. 다중 클래스 이름 사용

CSS Module에서도 여러 클래스를 결합해 사용할 수 있습니다.

 

예제

Button.module.css

.button {
  padding: 10px;
}

.primary {
  background-color: blue;
  color: white;
}

 

Button.js

import styles from "./Button.module.css";

function Button({ label }) {
  return <button className={`${styles.button} ${styles.primary}`}>{label}</button>;
}

export default Button;

 

2. 전역 클래스 함께 사용

로컬 스코프와 전역 스코프를 결합할 수 있어요.

 

예제

Button.module.css

.button {
  padding: 10px;
}

.global-class {
  font-size: 20px;
}

 

Button.js

function Button({ label }) {
  return <button className={`global-class ${styles.button}`}>{label}</button>;
}

export default Button;

 

Tip: 전역 클래스는 CSS Module로 처리되지 않으므로 프로젝트의 전역 CSS에서 정의해야 합니다.

 

3. Dynamic Class Binding with Classnames

다양한 조건에 따라 클래스를 동적으로 적용할 때 classnames 라이브러리가 유용합니다.

 

(1) 설치

npm install classnames

 

(2) 사용 예제

Button.js

import styles from "./Button.module.css";
import classNames from "classnames";

function Button({ label, primary }) {
  const buttonClass = classNames(styles.button, {
    [styles.primary]: primary,
  });
  return <button className={buttonClass}>{label}</button>;
}

export default Button;

---

CSS Module의 이점과 한계 🎯

이점

1. 클래스 이름 충돌 방지: 컴포넌트 기반 개발에 최적화
2. 로컬 스코프: 스타일링 범위가 제한되어 예측 가능
3. 가독성 향상: 스타일과 컴포넌트를 함께 관리
4. 유지보수성 향상: 대규모 프로젝트에서 코드 관리 용이

한계

1. 학습 곡선: CSS Module의 문법과 사용법을 처음 익히는 데 시간이 필요할 수 있음
2. 전역 스타일 관리: 전역 스타일을 함께 관리하려면 추가적인 설정이 필요
3. 추가 설정 필요: Webpack과 같은 빌드 도구 설정 필수

---

실무에서의 활용 예제 💼

글로벌 테마와 결합

프로젝트의 글로벌 테마와 CSS Module을 함께 사용할 수 있습니다.

 

예제

 

Theme.css (전역 스타일)

:root {
  --primary-color: #3498db;
}

 

Button.module.css

.button {
  background-color: var(--primary-color);
  color: white;
}

---

CSS Module vs. CSS-in-JS 🤔

특징	CSS Module	CSS-in-JS
스타일 정의 방식	외부 .css 파일	JavaScript 파일 내부
성능	빌드 시 최적화 가능	런타임에 일부 처리
러닝 커브	CSS 문법 그대로 사용	새로운 스타일링 API 학습 필요
유연성	전통적인 CSS와 호환 가능	동적 스타일링과 조건부 스타일링에 강력

---

결론: CSS Module, 스타일링의 필수 도구 ✨

 

CSS Module은 컴포넌트 중심의 개발 방식과 완벽히 맞아떨어지는 스타일링 도구입니다. 특히, 스타일 충돌 방지와 유지보수성 면에서 탁월한 이점을 제공합니다. CSS Module을 활용해 깔끔하고 확장 가능한 스타일링을 구현해 보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷