.css와 .module.css의 차이

.css와 .module.css의 차이

2024. 9. 5. 23:09ㆍWEB.DEV

리액트에서 개발을 하다 보면 .css를 사용하는 사람도 있고, .module.css를 사용하는 사람도 있는걸 볼수 있다. 두개의 차이에 대해서 알아보겠습니다.

.css 파일

.css 파일은 import를 하게 되면 import한 파일 내에서만 사용이 될거라고 생각을 하지만 생각과 다르게 글로벌 범위에 전역으로 적용이 됩니다. 이는 동일한 클래스 이름을 가진 요소가 여러 곳에서 동일한 스타일을 가질 수 있다는 것을 의미합니다. 따라서, 다른 컴포넌트나 페이지에서 동일한 클래스 이름을 사용할 경우, 원치 않은 스타일이 적용이 될수 있습니다. 다만, import만 하여 간단하게 사용을 할 수 있습니다.

// Button.css
.button {
    ...
}

// Button.tsx
import './Button.css';

export default function Button({...props}) {
  return (
    <button {...props} className="button" />
  )
}

// Menu.css
.button {
  ...
}

// Menu.tsx
import './Menu.css';

export default function Menu({...props}) {
  return (
    <button {...props} className="button" />
  )
}

위와 같이 import를 통해 간단하게 사용을 할수 있지만 Button.css와 Menu.css에 동일하게 button 클래스가 있어 두개의 스타일이 충돌을 일으켜 원래 보여주려고 한 디자인과 다르게 보일수가 있습니다.

위의 예시를 개발자 도구로 확인을 하게 되면 아래와 같습니다.

<!-- Button -->
<button class="button">...</button>

<!-- Menu -->
<button class="menu">...</button>

혼자서 개발을 하면서 클래스명을 잘 정해서 개발을 할 때는 문제가 발생할 가능성이 낮지만 협업으로 같이 개발을 할 때는 중복된 클래스명이 생길 가능성이 높아져 스타일이 충돌할 가능성 또한 높아질 수 있습니다.

.module.css

.module.css는 .css와 달리 import한 파일 내에서 정의된 클래스는 기본적으로 로컬 범위로 제한됩니다. 이는 같은 이름의 클래스가 다른 컴포넌트에 존재해도 import한 컴포넌트에서 고유하게 적용이 됩니다. 이렇게 하면 스타일 충돌을 방지할 수 있습니다.

스타일 충돌이 방지가 되는 이유는 클래스 이름이 자동으로 해시 값으로 변환되어 고유하게 만들어지기 때문입니다.

다만, .css와 달리 import 만 해서는 적용이 되지 않고, 객체 형태로 import하여 사용해야 합니다.

// Button.module.css
.button {
  ...
}

// Button.tsx
import styles from './Button.module.css';

export default function Button({...props}) {
  return (
    <button {...props} className={styles.button} />
  )
}

// Menu.module.css
.button {
  ...
}

// Menu.tsx
import styles from './Menu.module.css';

export default function Menu({...props}) {
  return (
    <button {...props} className={styles.button} />
  )
}

위의 예시를 개발자 도구로 확인을 하게 되면 아래와 같습니다.

<!-- Button -->
<button class="Button_button__1a2b3c">...</button>

<!-- Menu -->
<button class="Menu_button__4d5e6f">...</button>

위와 같은 결과가 나오는 이유는 CSS Module이 Javascript 객체로 변환되고, 이 객체는 CSS 클래스 이름을 고유한 해시로 매핑한 형태로, 컴포넌트에서 이 객체를 통해 클래스 이름을 참조할 수 있습니다.

확인을 하는 방법으로 import한 styles를 콘솔에 찍어보면 아래와 같이 되어 있는것을 확인 할 수 있습니다.

// Button
console.log(styles); // { button: 'Button_button__1a2b3c' }

// Menu
console.log(styles); // { button: 'Menu_button__4d5e6f' }