icon안동민 개발노트

CSS 모듈 소개

 CSS 모듈은 CSS의 스코프를 지역적으로 제한하여 스타일 충돌 문제를 해결하는 접근 방식입니다.

 이는 특히 대규모 React 프로젝트에서 스타일을 관리하는 데 매우 유용한 기술입니다.

CSS 모듈의 개념

 CSS 모듈은 CSS 파일을 JavaScript 모듈처럼 다룰 수 있게 해줍니다.

 각 CSS 파일은 독립적인 스코프를 가지며, 클래스 이름이 자동으로 고유한 식별자로 변환됩니다.

CSS 모듈의 장점

  1. 지역 스코프 : 클래스 이름 충돌을 방지합니다.
  2. 재사용성 : 컴포넌트별로 스타일을 모듈화할 수 있습니다.
  3. 유지보수성 : 스타일과 컴포넌트의 관계가 명확해집니다.
  4. 성능 : 불필요한 스타일 적용을 줄일 수 있습니다.

React 프로젝트에서 CSS 모듈 사용하기

 Create React App으로 생성된 프로젝트에서는 CSS 모듈이 기본적으로 지원됩니다.

 파일 이름을 [name].module.css 형식으로 지정하면 됩니다.

Button.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
 
.primary {
  background-color: green;
}
Button.js
import React from 'react';
import styles from './Button.module.css';
 
function Button({ primary, children }) {
  return (
    <button className={`${styles.button} ${primary ? styles.primary : ''}`}>
      {children}
    </button>
  );
}
 
export default Button;

 이 예제에서 styles.button과 styles.primary는 고유한 클래스 이름으로 변환되어 적용됩니다.

스타일 충돌 문제 해결

 CSS 모듈은 빌드 시 각 클래스 이름을 고유한 식별자로 변환합니다.

 예를 들어, Button.module.css의 .button 클래스는 실제로 Button_button__2Fxyj와 같은 형태로 변환될 수 있습니다. 이렇게 하면 다른 컴포넌트의 .button 클래스와 충돌하지 않습니다.

네이밍 규칙

 CSS 모듈을 사용할 때는 일반적인 CSS 네이밍 규칙을 따르면 됩니다.

 하지만 클래스 이름이 자동으로 고유해지므로, 더 간단하고 직관적인 이름을 사용할 수 있습니다.

.container { /* ... */ }
.title { /* ... */ }
.buttonGroup { /* ... */ }

전역 스타일과의 조합

 때로는 전역 스타일과 CSS 모듈을 함께 사용해야 할 수 있습니다.

 이럴 때는 :global 선택자를 사용할 수 있습니다.

:global(.globalClass) {
  /* 전역적으로 적용될 스타일 */
}
 
.localClass {
  /* 모듈 스코프 내에서만 적용될 스타일 */
}

 또한, 전역 스타일 파일을 별도로 만들어 import할 수도 있습니다.

CSS 모듈 사용 시 Best Practices

  1. 컴포넌트별 모듈화 : 각 React 컴포넌트에 대응하는 CSS 모듈을 만듭니다.
  2. 의미 있는 클래스 이름 : 클래스 이름이 컴포넌트 내에서만 유효하므로, 간단하고 명확한 이름을 사용합니다.
  3. 컴포지션 활용 : CSS 모듈의 composes 기능을 사용하여 스타일을 조합할 수 있습니다.
.baseButton {
  /* 기본 버튼 스타일 */
}
 
.primaryButton {
  composes: baseButton;
  /* primary 버튼 추가 스타일 */
}
  1. 동적 클래스 적용 : 조건부로 클래스를 적용할 때는 템플릿 리터럴이나 classnames 라이브러리를 활용합니다.

주의사항

  1. 빌드 설정 : CSS 모듈을 지원하지 않는 환경에서는 추가 설정이 필요할 수 있습니다.
  2. IDE 지원 : 일부 IDE에서는 CSS 모듈의 자동완성 기능이 제한적일 수 있습니다.
  3. 런타임 성능 : CSS 모듈은 빌드 시 처리되므로 런타임 성능에는 영향을 주지 않습니다.

실제 사용 예제

 다음은 CSS 모듈을 사용한 간단한 카드 컴포넌트 예제입니다.

Card.module.css
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 8px;
}
 
.title {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}
 
.content {
  font-size: 14px;
  color: #666;
}
Card.js
import React from 'react';
import styles from './Card.module.css';
 
function Card({ title, content }) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.content}>{content}</p>
    </div>
  );
}
 
export default Card;

 이 예제에서 Card 컴포넌트는 자체적인 스타일을 가지며, 다른 컴포넌트의 스타일과 충돌할 걱정 없이 사용할 수 있습니다.

 CSS 모듈은 React 애플리케이션에서 스타일을 관리하는 강력한 방법입니다.

 이를 통해 스타일의 모듈화, 재사용성, 그리고 유지보수성을 크게 향상시킬 수 있습니다.

 특히 대규모 프로젝트에서 CSS 모듈은 스타일 관리의 복잡성을 줄이고, 컴포넌트 기반 개발 방식과 잘 어울립니다.

 하지만 프로젝트의 요구사항과 팀의 선호도에 따라 다른 스타일링 방식과 적절히 조합하여 사용하는 것이 좋습니다.

이전으로다음으로