CSS Module
외부 CSS 파일을 참조하는 방식은 React 애플리케이션의 규모가 커질수록 여러 컴포넌트에서 사용된 CSS 클래스명이 서로 중복될 가능성이 높아진다. 만약 서로 다른 두 개의 CSS 파일에 동일한 이름의 CSS 클래스가 정의되어 있다면, 해당 클래스가 적용된 React 엘리먼트는 이 두 스타일이 모두 한꺼번에 되기 때문에 이를 방지하기 위해서 CSS Module이란 것을 사용할 수 있다.
사용방법
[모듈명].module.css
CSS Module을 적용한 파일에 작성된 클래스는 styles객체를 활용해서 자바스크립트 객체의 property 형식으로 참조할 수 있다.
import styles from '파일 경로';
<div className="{styles.[클래스명]}">...</div>리액트에서는 해당 CSS파일을 불러올 떄 선언된 CSS클래스명을 모두 고유한 이름으로 자동 변환한다고 한다. 고유한 클래스명은 파일 경로, 파일이름, 원래 작성한 클래스명, 해쉬값 등을 사용해서 자동생성한다. 그렇기 때문에 CSS Module을 사용하면 CSS파일마다 고유한 네임스페이스를 자동으로 부여해주기 때문에 리액트의 컴포넌트는 완전히 분리된 스타일을 보장받게 된다!
그전까진 일반 CSS파일만 만들고 툭 던져주고 module.css 파일은 저게 뭐지 싶으면서 넘어가곤 했다. 그런데 오늘 하영님 css파일 적용 안되는거 같이 찾아보다가 module.css 방식으로 사용하시는 것을 보고 구글링하면서 같이 적용해보았는데 생각보다 쉽게 적용방법을 알게 되어서 간단히 넘어갔다. 알고 나서부터는 또 안써볼 수가 없지않을까. 다음 프로젝트에는 module.css방식으로 진행해봐야겠다.
