[React] CSS module 사용하기

📌 CSS module 사용하기

 

✅ 외부 CSS 파일 참조

• 여러 컴포넌트에서 사용된 CSS 클래스명이 서로 중복될 가능성이 높아진다.
• 서로 다른 두 개의 CSS 파일에 동일한 이름의 CSS 클래스가 정의되어 있다면, 해당 클래스가 적용된 React 엘리먼트는 이 두 스타일이 한꺼번에 적용된다.

 

 

 

✅ CSS Module

• CSS 클래스명을 고유한 이름으로 자동 변환해서 CSS 클래스명이 서로 겹치는 현상을 방지해준다.
• CSS Module을 사용하면 CSS 파일마다 고유한 네임스페이스를 자동으로 부여해 주기 때문에 각각의 React 컴포넌트는 완전히 분리된 스타일을 보장받는다.

 

 

⏩ CSS Module 사용

 

1. CSS 파일명

[모듈명].module.css

 

 

2. CSS Module 사용

{styles.[클래스명]}

import styles from "파일 경로";

<div className="{styles.[클래스명]}">...</div>

 

import styles from "./FirstModule.module.css";

const FirstModule = () => {
  return (
    <div className={styles.wrapper}>
      <h1>Hello, React!</h1>
    </div>
  );
};

export default FirstModule;

 

 

 

 

 

 

⏩ 여러 CSS Module 클래스 적용

• 템플릿 리터럴(template literal) 사용

import styles from "./FirstModule.module.css";

const FirstModule = () => {
  return (
    <div className={`${styles.wrapper} ${styles.h1}`}>
      <h1>Hello, React!</h1>
    </div>
  );
};

export default FirstModule;

 

 

 

---

 

Adding a CSS Modules Stylesheet | Create React App

 

코딩교육 티씨피스쿨

 

W3Schools.com

 

02) React에서의 CSS 모듈