CSS Modules

Vue.js CSS Modules: 컴포넌트 스타일을 효과적으로 관리하는 방법

소개

Vue.js는 컴포넌트 기반 프레임워크로, 각 컴포넌트는 독립적인 스타일을 가질 수 있습니다. 이러한 스타일을 효과적으로 관리하고 충돌을 방지하기 위해 CSS Modules가 사용됩니다. CSS Modules는 CSS를 모듈화하여 각 컴포넌트의 스타일을 캡슐화하고, 다른 컴포넌트와의 스타일 충돌을 방지합니다.

왜 CSS Modules가 필요한가요?

• 글로벌 네임스페이스 충돌 방지: CSS 클래스 이름이 전역적으로 유일해야 한다는 부담에서 벗어날 수 있습니다.
• 컴포넌트 간 스타일 격리: 각 컴포넌트의 스타일이 다른 컴포넌트에 영향을 미치지 않도록 격리됩니다.
• CSS 유지보수 용이: 스타일을 컴포넌트 단위로 관리하여 코드 가독성을 높이고 유지보수를 용이하게 합니다.
• CSS-in-JS와의 호환성: CSS-in-JS 라이브러리와 함께 사용하여 더욱 강력한 스타일링 기능을 활용할 수 있습니다.

728x90

Vue.js에서 CSS Modules 사용하기

Vue.js에서 CSS Modules를 사용하려면 <style> 태그에 module 속성을 추가하면 됩니다.

 

<template>
  <div class="my-class">
    Hello, CSS Modules!
  </div>
</template>

<style module>
  .my-class {
    color: blue;
  }
</style>

 

위 코드에서 .my-class 클래스는 전역적으로 유일한 클래스 이름으로 바뀌게 됩니다. 예를 들어, 컴파일 후에는 다음과 같이 변경될 수 있습니다.

.my-class_12345 {
  color: blue;
}

 

컴파일러가 클래스 이름을 임의의 해시 값으로 변경하여 충돌을 방지합니다.

CSS Modules의 장점

• 컴포넌트 단위 스타일링: 각 컴포넌트의 스타일을 독립적으로 관리할 수 있습니다.
• 명명 충돌 방지: 클래스 이름이 중복될 걱정 없이 자유롭게 클래스 이름을 지정할 수 있습니다.
• CSS-in-JS와의 통합: CSS-in-JS 라이브러리와 함께 사용하여 더욱 유연한 스타일링이 가능합니다.
• 스타일링 재사용: CSS Modules는 스타일을 재사용하기 쉽도록 도와줍니다.

CSS Modules의 단점

• 빌드 시간 증가: CSS Modules를 사용하면 빌드 시간이 약간 증가할 수 있습니다.
• 학습 곡선: CSS Modules의 개념을 이해하는 데 시간이 걸릴 수 있습니다.

실제 예시: 테마 변경

CSS Modules를 사용하여 테마를 변경하는 예를 살펴보겠습니다.

<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Hello, World!</h1>
  </div>
</template>

<style module>
  .container {
    background-color: #fff;
  }

  .title {
    color: #333;
  }

  .dark-mode .container {
    background-color: #333;
  }

  .dark-mode .title {
    color: #fff;
  }
</style>

 

위 코드에서 dark-mode 클래스를 추가하여 테마를 변경할 수 있습니다.

결론

CSS Modules는 Vue.js 컴포넌트의 스타일을 효과적으로 관리하고 유지보수하기 위한 강력한 도구입니다. CSS Modules를 사용하면 더욱 견고하고 확장 가능한 Vue.js 애플리케이션을 개발할 수 있습니다.