[React.js] 일반 CSS와 CSS Module 비교

일반 CSS와 CSS Module 비교

들어가며

• 리액트(React.js)에서 CSS Module과 일반 CSS의 차이점에 대해 정리해본다.
• 두 방식의 큰 차이점은 CSS 클래스의 범위(Scope)와 이름 충돌 방지이다

 

일반 CSS 방식

• 일반적으로 사용되는 CSS는 전역적으로 동작한다.
• 스타일 시트에서 정의된 클래스 이름이 프로젝트의 모든 컴포넌트에 영향을 미칠 수 있다.
• 모든 컴포넌트는 같은 CSS 파일을 참조할 수 있고, 클래스 이름이 겹치면 스타일이 덮어씌워질 가능성이 있다.

 

HomePage.css

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

 

HomePage.jsx

import './HomePage.css';

const HomePage = () => {
  return (
    <button className="button">Click Me</button>
  );
};

export default HomePage;

 

⇒ @button@ 클래스를 사용하는 모든 컴포넌트에서 동일한 스타일이 적용된다. (다른 컴포넌트에서 같은 클래스 이름을 사용할 경우 스타일이 충돌할 수 있다.)

 

CSS Module 방식

• 모듈화된 CSS를 제공하여 클래스 이름이 지역(Local) 범위를 가진다.
  • 컴포넌트마다 고유한 클래스 이름이 생성되므로 이름 충돌 없이 독립적인 스타일을 적용할 수 있다.
• 각 클래스 이름이 해시값으로 변환되어 해당 컴포넌트에만 적용된다.

 

HomePage.module.css

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

 

HomePage.jsx

import styles from './HomePage.module.css';

const HomePage = () => {
  return (
    <button className={styles.button}>Click Me</button>
  );
};

export default HomePage;

 

⇒ @button@ 클래스는 자동으로 고유한 이름으로 변환되며, 다른 컴포넌트에서 같은 클래스 이름을 사용해도 충돌하지 않는다.

⇒ 위에서 작성한 @button@ 클래스는 실제로 다음과 같이 변환된다.

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

 

정리

• 두 방식의 차이점을 정리하면 다음과 같다.

구분	일반 CSS	CSS Module
범위	전역(Global) 범위	로컬(모듈, Local) 범위
클래스 충돌	클래스 이름이 겹치면 충돌 가능	고유한 클래스 이름으로 변환되어 충돌 없음
사용 방법	컴포넌트마다 동일한 CSS 파일 불러옴.	각 컴포넌트에 고유한 스타일 적용 가능
컴포넌트 간 재사용	전역 CSS에서 쉽게 재사용 가능	모듈화된 컴포넌트 내에서만 사용 가능

일반 CSS는 전역적으로 적용되기 때문에 작은 프로젝트나 클래스 이름 충돌이 문제가 되지 않는 경우에 적합하다. CSS Modules는 큰 프로젝트나 컴포넌트 간 스타일의 이름 충돌을 방지하고, 컴포넌트 별로 스타일을 모듈화하여 관리하고 싶을 때 사용하면 유용하다.

 

참고 사이트

GitHub - css-modules/css-modules: Documentation about css-modules