CSS-Module

🚨 에러발생

js로 만든 파일을 react로 옮기는데 같은 클래스이름을 가진 css스타일이 같이 적용되는 문제발생..!

CSS-Module이란?

• CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술

🫧 사용이유?

1. 클래스명(className)이 충돌하는 것을 방지해준다.

2. 유지보수하기 편해진다.

3. 간결한 클래스명을 이용해 컴포넌트 단위로 스타일을 적용할 때 유용하다.

react에서 모듈을 사용하지 않을 시, 부모 컴포넌트의 css가 자녀들에게 모두 적용되어 side effect 발생 확률이 높아진다!

사용방법

기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않도록 css파일의 확장자를 .module.css로 만든다.
👉 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다.

import React from "react";
import styles from "./Box.module.css";

const CSSModule = () => {
  return (
    <div className={styles.Box}>
      Box
    </div>
  );
};

export default Box;

---------------------------------------------

<button className={`${style.buttonColor} ${style.fontColor}`}>버튼</button>
//여러개의 클래스 적용 시 백틱 사용

📍 .module.css 확장자로 파일을 저장
📍 import styles from "CSS module 클래스명"