CSS 모듈화

1. 도입 (왜 배워야 하는가)

CSS 모듈화는 웹 개발에서 매우 중요한 개념입니다. 웹 애플리케이션이 커질수록 CSS 코드도 복잡해지고, 이를 관리하는 것이 어려워집니다. 모듈화를 통해 CSS 코드를 더 잘 조직하고 재사용할 수 있기 때문에, 코드의 유지보수성과 가독성이 크게 향상됩니다.

모듈화를 하지 않을 경우, 스타일이 겹치거나 의도하지 않은 방식으로 요소가 변경될 수 있습니다. 예를 들어, 한 페이지의 스타일을 수정하면서 다른 페이지의 스타일이 깨지는 경우가 발생할 수 있습니다. 이러한 문제는 개발 시간과 비용을 증가시킵니다. 따라서, CSS 모듈화는 팀 작업에서의 협업 효율성을 높이고, 코드 품질을 유지하는 데 필수적입니다.

2. 핵심 개념 설명

CSS 모듈화는 CSS 파일을 기능별로 나누어 관리하는 방법입니다. 이를 통해 코드의 중복을 줄이고, 각 모듈이 독립적으로 동작하도록 할 수 있습니다.

관련 용어 정리

비유하자면, CSS 모듈화는 옷장 정리와 비슷합니다. 모든 옷을 종류별로 나누어 정리하면 필요한 옷을 쉽게 찾을 수 있듯이, CSS도 기능별로 나누어 놓으면 필요한 스타일을 쉽게 찾고 수정할 수 있습니다.

3. 기본 코드 예제

다음은 간단한 CSS 모듈화의 예시입니다.

/ button.module.css /
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/ button.module.css를 import한 JavaScript 파일 예시 /
import styles from './button.module.css';

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

실행 결과

• 버튼이 파란색 배경과 하얀 텍스트를 가집니다.

코드 한 줄씩 동작 설명

1. .button 클래스 정의: 버튼의 기본 스타일을 설정합니다.
2. import styles: CSS 모듈을 JavaScript 파일로 가져옵니다.
3. className={styles.button}: 버튼에 CSS 모듈에서 정의한 스타일을 적용합니다.

4. 실전 활용 예제

1. 쇼핑몰에서 장바구니 아이콘 구현

장바구니 아이콘의 스타일을 모듈화하여 재사용할 수 있습니다.

/ cart.module.css /
.cart-icon {
  width: 24px;
  height: 24px;
  background-image: url('cart.svg');
  background-size: cover;
}

2. 네비게이션 바 스타일링

네비게이션 바의 스타일을 모듈화하여 다른 페이지에서도 사용할 수 있습니다.

/ navbar.module.css /
.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
  padding: 10px;
}

5. 흔한 실수와 주의사항

실수 1: 클래스 이름 중복

잘못된 코드:

.button {
  color: red;
}

올바른 코드:

/ button.module.css /
.button {
  color: blue;
}

4. 클래스 이름이 중복되면 스타일 충돌이 발생할 수 있습니다.

실수 2: 모듈화하지 않음

잘못된 코드:

/ main.css /
.button {
  background: blue;
}

올바른 코드:

/ button.module.css /
.button {
  background: blue;
}

5. 모든 CSS를 한 파일에 담으면 관리가 어려워집니다.

6. 정리

6. CSS 모듈화는 코드의 가독성과 유지보수성을 높입니다.
7. 모듈화된 CSS는 재사용성이 뛰어납니다.
8. BEM, SCSS와 같은 도구를 활용하면 CSS 모듈화를 더욱 효율적으로 할 수 있습니다.

다음에 학습하면 좋은 주제는 CSS 전처리기(Sass, Less)와 CSS-in-JS입니다. 이러한 도구들은 CSS 모듈화를 더욱 강화할 수 있는 좋은 방법입니다.