[React.js] CSS 클래스 중복을 피하기 위한 CSS module

리액트 프로젝트 수행을 하면서

CSS 네이밍 규칙을 따르기 어려울 때(레거시 프로젝트 등)

CSS module을 활용하면

클래스에 난수를 발생해주기에 기존 CSS 클래스와 중복될 일이 없다.

 

네이밍 규칙을 따로 정해놓고 하는것도 좋겠지만 한계가 있으니 이런 모듈을 사용해도 괜찮을 것 같다.

 

참고로 CSS module은

npx create-react-app 을 설치 시 자동으로 적용이 된다.

자세히는 webpack의 css-loader에서 지원한다고 한다.