[React] css module 사용하기

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