css-module

CSS Module

코드의 가독성과 유지보수를 위해 css 코드를 분리하는 것을 선호하는 편이다. 문제는 리액트 프로젝트에서는 .css 파일을 컴포넌트에서 바로 import했을 경우 css 클래스가 중첩될 수 있다는 것이다. 어떤 컴포넌트에서 import되었더라도 전체 HTML 코드에서는 head태그 안에 style로 저장되기 때문에, 모든 컴포넌트에 적용된다. 따라서 실수로 클래스 이름을 같게 했다면 다른 엘리먼트에 같은 스타일이 적용되고, 코드가 길어질수록 이런 문제는 자주 발생하게 된다. 이를 해결하기 위해 CSS Module을 사용한다. CSS Module을 사용하면 해당 CSS 파일에 선언한 클래스 이름들이 모두 고유해지기 때문에 클래스 중첩을 완벽히 방지할 수 있다. CRA(create-react-app)으로 만..