React.js 에서는 css module 개념이 있는데 그 개념은 다음과 같다. 해당 CSS가 전역적으로 사용되지 않고 특정 컴포넌트에서만 독립적으로 관리할 수 있도록 도와주는 방법이다. 고유한 클래스 이름을 자동으로 생성하여 CSS가 의도치 않게 다른 부분에 영향을 미치는 것을 막을 수 있습니다.

CSS 모듈의 특징

고유한 클래스 이름 생성 (클래스 이름에 고유의 hash 값이 생성됨)
컴포넌트 단위 스타일링
파일 이름 규칙: .module.css or .module.scss

사용법

/* Button.module.css */
.button {
    background-color: red;
}

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

function Button() {
  return (
    <button className={styles.button}>
      Click!
    </button>
  )
}

export default Button;

CSS module 을 사용하지 않은 다른 컴포넌트간의 클래스 이름이 겹칠 경우

// Button.jsx
import "./Button.css";

function Button() {
  return (
    <button>
      <p className="large-text">버튼</p>
    </button>
  )
}

export default Button;

/* Button.css */
button {
  background-color: blue;
}
.large-text {
  font-size: 12px;
  color: red;
}

// Box.jsx
import "./box.css";

function Box() {
  return (
    <div className="box">
      <p className="large-text">박스</p>
    </div>
  )
}

export default Box;

/* Box.css */
.box {
  width: 300px;
  background-color: red;
}
.large-text {
  font-size: 20px;
  color: blue;
}

// App.js
// 해당 컴포넌트들을 렌더링하는 부모컴포넌트
import Button from "./components/Button";
import Box from "./components/Box"

function App() {

  return (
    <main>
      <Button />
      <Box />
    </main>
  );
}

export default App;

동일한 클래스 이름의 large-text라는 클래스 이름의 폰트의 컬러가 겹치게 된다. (Box.jsx 컴포넌트의 large-text color 가 Button.jsx 의 large-text color까지 영향을 주는 모습)

장점

클래스 이름 충돌 방지
컴포넌트 기반 스타일링
자동 최적화 (빌드 과정에서 자동으로 클래스 이름이 최적화)

단점

동적 클래스 생성 (고유한 클래스 이름을 생성하기 때문에 동적으로 클래스 이름을 생성하거나 조합해야 할 때는 불편)
전역 스타일 적용이 복잡 (전역 스타일과 모듈을 함께 사용할 때 복잡할 수 있음)

결론

리액트에서 CSS 모듈은 컴포넌트 별 스타일을 적용하고 클래스 이름 충돌을 방지할 수 있습니다. 컴포넌트 기반의 리액트의 특성에 잘 맞아 상황에 따라 잘 사용하면 좋다.