반응형
CSS Modules
CSS Modules란 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식을 말한다. webpack에서 사용하는 css-loader가 필요한데, CRA로 개시한 프로젝트에서는 자동으로 세팅되어 있다.
React에서 CSS Modules 사용하기
CSS Modules를 사용하려면 스타일시트 파일명을 아래처럼 명명하면 된다.
컴포넌트이름.css 컴포넌트이름.scss 컴포넌트이름.sass |
→ |
컴포넌트이름.module.css 컴포넌트이름.module.scss 컴포넌트이름.module.sass |
/* test.module.css */
#button {
color: red;
font-size: 10px;
}
.main-container {
margin: 20px;
}
// app.js
import styles from "./test.module.css"; // 컴포넌트 상단에서 import
function App() {
return (
<div id={styles["main-container"]}> // styles 객체 안에 있는 클래스 값들을 불러오기
<button className={styles.button}>버튼</button>
</div>
);
}
export default App;
옵션
- : global → 전역 지정 스타일
- : local → 특정 컴포넌트에서의 사용을 지정하는 스타일
:global .red {
color: crimson;
}
:local .local-color {
color: red;
}
CSS Modules의 장점
- 레거시 프로젝트에 리액트를 도입할 때, 기존 프로젝트에 있는 CSS 클래스와 이름이 중복되어도 새로운 이름이 입혀지기 때문에 스타일이 꼬이지 않음.
- CSS 중복을 방지하기 위해 CSS 클래스 네이밍 규칙을 고민하지 않아도 된다.
CSS Modules의 단점
- 컴포넌트를 작성할 때 한 곳에서 모든 것을 작성하지 않고 따로 스타일시트 파일을 만들어야 하고, 그것들을 따로 관리해야 함.
공식 문서
https://github.com/css-modules/css-modules
GitHub - css-modules/css-modules: Documentation about css-modules
Documentation about css-modules. Contribute to css-modules/css-modules development by creating an account on GitHub.
github.com
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
Modern CSS - Emotion이란? (0) | 2022.02.24 |
---|---|
Modern CSS - Styled JSX (0) | 2022.02.23 |
Modern CSS - Styled Component (0) | 2022.02.18 |
상태 관리 라이브러리 - Vuex (0) | 2022.02.17 |
프레임워크 - Vue.js (0) | 2022.02.16 |