CSS-Module 이란?

🎨 CSS Module 이란?

CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다.

 

 

 

장점

• CSS Module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다.
• CSS Module은 컴포넌트 단위로 스타일을 적용할 때 유용하다.

 

 

 

본인은 리액트에서 CSS Module을 사용한 경험이 있다.
Webpack의 css-louder로 번들링을 해서 사용을 했었다.
컴포넌트별로 관리할 때 사용하기 몹시 편리했고, 그동안 SCSS에선 동일한 스타일의 속성을 include나 mixin을 활용해서 중복을 최대한 줄여도 결국 클래스명은 따로 선언해줘야 되는 점이 아쉬웠다.
하지만 CSS Module은 스타일의 속성을 한 곳에서만 지정하면 여러 군데에서 사용할 수 있는 점이 좋았다.

 

 

 

🎨 사용법

👉🏻 파일명 지정

파일명은 보통 클래스명.module.css 라고 사용한다.

 

src/Button.module.css

.buttonColor {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
}

 

 

👉🏻 적용법

import를 할 때 앞에 이름을 지정하고, 클래스에 적용시킬 때는 메서드를 호출하는 것 처럼 CSS module 클래스명을 호출하면 된다.

 

src/CSSModule.js

import React from 'react';
import styles from './Button.module.css';

const CSSModule = () => {
  return (
    <div className={styles.buttonColor}>
      클릭
    </div>
  );
};

export default CSSModule;

 

 

여러 개의 클래스를 적용할 때는 백틱(`)을 사용한다.

<button className={`${style.buttonColor} ${style.fontColor}`}>버튼</button>