.module.css를 .css 대신 사용해보자

개요

기존에 내가 진행했던 프로젝트나 레퍼런스에서는, 항상 .css 파일을 통해 페이지를 디자인하려고 시도했었다. 하지만 이 구조로 페이지를 구현하는 경우, 만약 다른 파일의 클래스명이 같은 경우 다른 컴포넌트에서 사용하는 전혀 다른 구조의 클래스더라도 컴파일러에서 잘못 인식하여 종종 다른 컴포넌트 스타일 클래스와 충돌해버리는 문제가 발생하곤 했다.

import React from 'react';
import './button.css';

export default function Button({ children, onClick }) {
  return (
    <button className="btn" onClick={onClick}>
      {children}
    </button>
  );
}

위 버튼 컴포넌트의 예시는 내가 기존에 사용하던 .css 파일을 활용하는 button.jsx 컴포넌트이다. 이 버튼에 대한 스타일 코드는,

.btn {
  background-color: red;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

와 같은 식으로 구현된다. 하지만 내가 만약 다른 컴포넌트에서도 .btn이라는 스타일 클래스를 사용하고 있는 경우,

/* ex) App.css에서의 .btn 클래스라면? */
.btn {
  background-color: blue;
  color: black;
}

내가 사용하고자 했던 빨간색 버튼이 App.css의 영향으로 파란색으로 바뀌게 되어버린다.

어떻게 해야 할까?

css 파일을 만들 때 기존의 {클래스명} .css 대신, {클래스명}.module.css의 형태로 파일을 만들어 준다.

/* button.module.css라면 */
.btn {
  background-color: red;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

위와 같이, css 파일 작성 구조 자체는 기존과 다르지 않다. 하지만, 다른 점은 css를 실제 javascript에서 활용하는 과정에서 나타난다.

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

export default function Button({ children, onClick }) {
  return (
    <button className={styles.btn} onClick={onClick}>
      {children}
    </button>
  );
}

위와 같이, .btn 클래스를 실제로 사용할 button.jsx에서는 className에 className="클래스명" 대신 className={styles.[클래스명]}이 사용된다. 이렇게 명시해 주면, 같은 .btn이라는 컴포넌트 스타일이 있더라도 각각의 css마다 고유한 className을 부여받게 되어 고유한 스타일을 보장받을 수 있게 되는 것이다.

결론

.css 대신 .modules.css를 사용한다면 구체화된 클래스 참조를 통해 같은 스타일 클래스 간 충돌이 방지되고, 나아가 코드의 가독성 상승으로 인해 유지보수가 훨씬 더 간편해질 것이라고 생각된다.