목차
2. CSS Module 사용이유, 사용방법
CSS Modules에 대해서 알아보자!
CSS Module 특징
리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다.
CRA나 VITE로 만든 프로젝트에서 CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 된다.
CSS Module의 장점은 아래와 같다.
1. 클래스 명의 전역 오염 방지
2. 고유한 클래스로 인하여 복잡한 클래스 명을 생각하며 작성하지 않음 (클래스 이름이 중첩되는것을 방지해준다.)
3. 사용 범위를 제한하여, 스타일링 하고싶은 컴포넌트가 다른 컴포넌트와 중복되는 클래스 이름에 의하여 방해되는것을 막아준다. (컴포넌트별 CSS 관리의 편리함)
CSS Module 사용이유
실험1) CSS Module을 사용하지 않았을 때
(1) Module1과 Module2 두개의 컴포넌트를 만든다.
(2) Module1과 Module2 둘 다 className을 똑같이 한다.
(3) Module1.css 에 스타일 코드를 짠다. → Module1.js에 Module1.css를 import한다.
(4) Module2.js에는 아무런 css파일도 import하지 않는다.
App.js
import Module1 from "./Module1";
import Module2 from "./Module2";
export default function App() {
return (
<div>
<Module1 />
<Module2 />
</div>
);
}
Module1.js
import "./module1.css";
const Module1 = () => {
return (
<div className="contain">
<h1>Module1</h1>
<button className="btn">Click Me!</button>
</div>
);
};
export default Module1;
Module2.js
const Module2 = () => {
return (
<div className="contain">
<h1>Module2</h1>
<button className="btn">Click Me!</button>
</div>
);
};
export default Module2;
module1.css
.contain{
width: 500px;
height: 250px;
border: 3px solid red;
}
.btn{
background: yellow;
}
결과 화면
문제점
Module1.js에만 module1.css를 import했는데, Module2.js에도 스타일이 들어갔다.
전역이 오염돼서 의도치 않게 다른 컴포넌트에도 스타일이 들어가버린 것이다.
이런 문제 때문에 CSS Module을 사용해야한다.
실험2) CSS Module을 사용했을 때
(1) Module1과 Module2 두개의 컴포넌트를 만든다.
(2) Module1과 Module2 둘 다 className을 똑같이 한다.
(3) Module1.module.css 에 스타일 코드를 짠다. → Module1.js에 Module1.module.css를 import한다.
(4) Module2.module.css 에 아무런 스타일 코드로 짜지 않는다. → Module2.js에 Module2.module.css를 import한다.
(참고로, CSS Module에서는 styles를 import하지 않으면 에러가 뜨기 때문에 비어있는 css파일이라도 import 해야한다.)
참고) CSS Module 사용방법
1. module.css 확장자로 파일을 저장하면 CSS Module이 적용된다.
2. import할때는 import styles from '저장 경로'
3. <div className={styles.클래스명}> ←클래스 네임은 이런식으로 작성하면 된다.
4. 만약 케밥 케이스를 사용해서 클래스 네임을 쓰고 싶다면,
<div className={styles.["h1-title"]}> ←이런식으로 [" "] 안쪽에 클래스명을 작성하면 된다.
5. :global 을 사용하여 전역적으로 클래스를 선언할 수 있다.
App.js
import Module1 from "./Module1";
import Module2 from "./Module2";
export default function App() {
return (
<div>
<Module1 />
<Module2 />
</div>
);
}
Module1.js
import styles from "./module1.module.css";
const Module1 = () => {
return (
<div className={styles.contain}> // CSS Module 사용할 스타일
<h1 className={styles["h1-title"]}>Module1</h1> // CSS Module 사용할 스타일 (케밥케이스)
<button className="btn">Click Me!</button> // btn은 전역 스타일
</div>
);
}
export default Module1;
Module2.js
import styles from "./module2.module.css"
const Module2 = () => {
return (
<div className={styles.contain}>
<h1 className={styles["h1-title"]}>Module2</h1>
<button className="btn">Click Me!</button>
</div>
);
}
export default Module2;
module1.css
.contain{
width: 500px;
height: 250px;
border: 3px solid red;
}
.h1-title{
color:blue;
}
:global .btn{
background: yellow;
}
결과 화면
결과
contain 스타일과 h1-title 스타일은 Module1에만 적용되었다.
btn은 global을 적용했기 때문에 Module1, Module2 둘 다 들어갔다.
참고 자료
https://react.vlpt.us/styling/02-css-module.html
리액트를 다루는 기술