CSS Modules

최종 수정 : 2024-04-18

CSS Modules

리액트 컴포넌트를 CSS로 개발하다보면 CSS 이름이 겹치는 문제가 발생할 수 있다. 이런 문제를 CSS Modules로 해결할 수 있다. 마치 자바스크립트 모듈을 사용하듯이 CSS 파일을 각각 독립적으로 사용할 수 있도록 해준다. 만약 같은 클래스 이름을 사용하더라도 CSS Moduels에서는 서로 다른 클래스 이름으로 인식한다. 

 

장점

컴포넌트 단위로 나누어서 스타일링 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다.

필요하다면 Scss로 CSS Modules를 사용할 수 있다.

 

단점 및 한계

 

---

참고 자료

https://github.com/css-modules/css-modules

GitHub - css-modules/css-modules: Documentation about css-modules

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Adding a CSS Modules Stylesheet | Create React App

https://nextjs.org/docs/pages/building-your-application/styling#adding-component-level-css

Building Your Application: Styling | Next.js