[모각소] SCSS와 CSS module

모각소를 진행하기 전 계획했던 화상채팅 웹앱의 메인페이지를 설계 및 제작하였다.
스타일시트 언어는 scss를 사용하였다. 기존에 CSS-in-CSS 방식보다는, CSS-in-JS 방식인 StyledComponent 라이브러리를 주로 사용했었는데, 현장실습을 진행중인 회사에서 CSS-in-JS 방식보다 CSS-in-CSS 방식을 사용하고 있어, 거기에 조금 더 익숙해지고자 이번 프로젝트에서 CSS-in-CSS 방식을 채택하게 되었다.

프로젝트를 하며 CSS(SCSS)를 작성할 때, 가장 중요한 점은 각자 다른 컴포넌트에서 classname을 중복해서 사용하면 안된다는 점이다. 왜냐하면, webpack등의 번들러의 도움으로 프로젝트 내의 css파일들이 브라우저내에 다운되게 되는데 이 때 각자 다른 컴포넌트에서 같은 classname으로 선언한 요소가 있다면, 스타일이 중첩되어 원하지 않는 결과를 만들 수 있기 때문이다.

이와같은 문제점을 해결하기 위하여 css module을 사용하였다.
css module을 사용하게 되면, classname이 만들어지는 과정에서 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용 될 수 있다.
▶ [filename]_[classname]__[hash] 형식의 고유한 클래스 이름을 자동으로 생성하고 매칭시켜준다. 즉 classname이 각자 다른 컴포넌트에서 동일하게 작성을 하더라도, 중복되지 않고 구분이 될 수 있도록 만들어 준다.

그리고 이렇게 만들어진 css classname을 사용하기 위해서는, module.scss 파일을 styles 객체로 불러온다음, classname={styles.container} 같은 형태로 사용하면 된다.

코드 예시

styles.module.scss

.container {
	display: flex;
    justify-content: center;
    align-items: center;
}

Mainpage.tsx

import styles from "./styles.module.scss";

...
<div classname={styles.container}>
...

해당 방식으로 사용할 수 있다.