22. CSS Modules로 배우는 컴포넌트별 스타일링: React 프로젝트에서 효율적인 CSS 관리

"CSS Modules로 배우는 컴포넌트별 스타일링: React 프로젝트에서 효율적인 CSS 관리"

---

1시간 분량 강의안 (CSS Modules 기초)

강의 목표

1. CSS Modules의 개념과 필요성을 이해한다.
2. CSS Modules를 사용해 React 컴포넌트별로 스타일을 캡슐화하는 방법을 학습한다.
3. CSS Modules를 활용해 이름 충돌 없이 효율적으로 스타일을 관리한다.

---

강의 목차

---

1. CSS Modules란 무엇인가? (10분)

CSS Modules의 정의

• CSS Modules는 CSS 파일의 클래스와 스타일을 로컬로 스코프화하여 이름 충돌을 방지하는 기술입니다.
• 각 CSS 파일이 특정 컴포넌트에 종속되어 컴포넌트별로 스타일을 독립적으로 관리할 수 있습니다.

CSS Modules의 주요 특징

1. 클래스 이름 충돌 방지: 각 클래스 이름이 고유하게 생성.
2. 컴포넌트별 스타일링: 스타일이 컴포넌트에 캡슐화.
3. 유지보수성 향상: 프로젝트 규모가 커져도 스타일 관리 용이.

CSS Modules의 파일 네이밍 규칙

• CSS Modules 파일은 .module.css 또는 .module.scss 확장자를 사용합니다.

---

2. CSS Modules 설정 및 사용법 (15분)

1단계: 기본 설정

• Create React App을 사용하면 CSS Modules가 기본적으로 설정되어 있습니다.

2단계: CSS Modules 파일 생성

1. Button.module.css 파일 생성:

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

.button:hover {
  background-color: darkblue;
}

1. React 컴포넌트에서 CSS Modules를 사용:

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

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

3단계: 클래스 이름이 동적으로 생성되는 원리

• CSS Modules는 클래스 이름을 다음과 같이 변환:
  • 원래 클래스: .button
  • 변환 후 클래스: Button_button__3kfJ2
• 이를 통해 클래스 이름 충돌을 방지.

---

3. CSS Modules의 고급 사용법 (20분)

1단계: 여러 클래스 병합

• 여러 클래스 이름을 병합하여 적용:

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

function Button({ primary }) {
  const buttonClass = primary ? styles.buttonPrimary : styles.button;
  return <button className={buttonClass}>Click Me</button>;
}

export default Button;

2단계: CSS 변수와 함께 사용

• CSS 변수를 활용하여 동적 스타일링:

/* Button.module.css */
.button {
  background-color: var(--button-bg, blue);
  color: white;
}

function Button() {
  return <button className={styles.button} style={{ '--button-bg': 'red' }}>Click Me</button>;
}

3단계: Sass와 함께 사용

• CSS Modules는 .module.scss 파일도 지원:

/* Button.module.scss */
.button {
  background-color: blue;
  &:hover {
    background-color: darkblue;
  }
}

---

4. CSS Modules의 장단점 (10분)

장점

1. 이름 충돌 방지: 전역 스타일 간섭 제거.
2. 유지보수성 향상: 컴포넌트 단위 스타일 관리 가능.
3. 리팩토링 용이: 스타일과 컴포넌트가 강하게 결합.

단점

1. 초기 설정 필요: 일부 프로젝트에서는 추가 설정 필요.
2. CSS-in-JS 대비 유연성 부족: 동적 스타일링 제약.

---

5. 실습 과제 (10분)

실습 과제

1. Card.module.css 파일을 생성하고, 카드 레이아웃 스타일을 정의하세요.
2. Card 컴포넌트에서 CSS Modules를 사용해 스타일을 적용하세요.
3. 버튼 hover 효과를 추가하세요.

---

6. Q&A 및 정리 (5분)

• Q&A:
  1. CSS Modules와 전역 CSS의 가장 큰 차이점은 무엇인가요?
  2. CSS Modules는 대규모 프로젝트에서 어떻게 활용되나요?
• 요약:
  • CSS Modules는 컴포넌트별로 스타일을 캡슐화하여 클래스 이름 충돌을 방지합니다.
  • .module.css 파일을 통해 간단하게 구현 가능하며, Sass와 함께 사용할 수도 있습니다.
  • 유지보수성이 뛰어나고 대규모 프로젝트에 적합한 스타일링 솔루션입니다.