CSS Modules - 온더테크

Contents

CSS 모듈(CSS Modules)

CSS 모듈의 개념과 필요성

역사적 배경 (Historical Background)

전통적인 CSS는 전역 스코프를 가지기 때문에, 대규모 프로젝트에서는 스타일 충돌 및 유지보수 어려움이 발생할 수 있습니다. 이를 해결하기 위해 2014년경부터 CSS 모듈이 등장했습니다. CSS 모듈은 파일 단위로 CSS를 로컬 스코프로 관리할 수 있게 하여 이러한 문제를 해결했습니다.

개념 및 원리 (Concept and Principles)

CSS 모듈은 각 CSS 파일을 로컬 스코프로 제한하여, 다른 파일의 스타일과 충돌하지 않도록 합니다. 이는 고유한 클래스명과 스타일을 자동으로 생성하여 구현됩니다. 예를 들어, 클래스명이 ‘button’일 경우, CSS 모듈은 이를 ‘button__hash’ 형태로 변환합니다.

모듈화된 CSS 작성 방법

예제 및 사용법 (Example and Usage)

/* Button.module.css */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = () => (
  <button className={styles.button}>
    클릭하세요
  </button>
);

export default Button;

위 예제에서 CSS 파일은 모듈로 작성되었고, JavaScript 파일에서 import 하여 사용됩니다. CSS 클래스명은 고유한 해시 값으로 변경되어 다른 CSS와 충돌하지 않습니다.

CSS 모듈의 장점과 단점

장점 (Advantages)

스타일 충돌 방지: 클래스명이 로컬 스코프로 관리되어, 다른 스타일과의 충돌을 방지합니다.
유지보수성 향상: 모듈화된 구조로 인해, 특정 컴포넌트의 스타일을 관리하기 용이합니다.
재사용성: 특정 컴포넌트의 스타일을 다른 컴포넌트에 쉽게 적용할 수 있습니다.

단점 (Disadvantages)

복잡성 증가: 작은 프로젝트에서는 오히려 복잡성을 증가시킬 수 있습니다.
초기 설정 필요: Webpack과 같은 번들러의 설정이 필요하여, 초기 설정이 번거로울 수 있습니다.

CSS 모듈과 JavaScript 프레임워크 연동: React, Vue

React와 CSS 모듈 (React and CSS Modules)

// App.js
import React from 'react';
import styles from './App.module.css';

const App = () => (
  <div className={styles.container}>
    <h1 className={styles.title}>CSS 모듈과 React</h1>
  </div>
);

export default App;

/* App.module.css */
.container {
  text-align: center;
}

.title {
  color: #333;
  font-size: 24px;
}

React에서는 CSS 모듈을 사용하여 각 컴포넌트의 스타일을 독립적으로 관리할 수 있습니다. 이는 컴포넌트 기반 아키텍처와 잘 맞아떨어집니다.

Vue와 CSS 모듈 (Vue and CSS Modules)

<!-- App.vue -->
<template>
  <div :class="$style.container">
    <h1 :class="$style.title">CSS 모듈과 Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style module>
.container {
  text-align: center;
}

.title {
  color: #333;
  font-size: 24px;
}
</style>

Vue에서는 <style module> 태그를 사용하여 CSS 모듈을 적용할 수 있습니다. 이는 Vue의 컴포넌트 스타일링을 보다 안전하고 일관되게 만듭니다.

결론 (Conclusion)

CSS 모듈은 스타일 충돌을 방지하고 유지보수성을 향상시키기 위해 등장한 기술입니다. React와 Vue와 같은 JavaScript 프레임워크와 연동하여 사용할 때, 그 진가를 발휘합니다. 다만, 프로젝트의 규모와 복잡성에 따라 CSS 모듈의 도입 여부를 신중히 결정해야 합니다.

Post Views: 138