[웹 개발] CSS-Module 을 왜 사용해야 할까?

1. CSS 는 전역이다.

위의 그림처럼 다른 component 파일을 정의하고 각각의 파일마다 다른 css 파일을 import하여 사용했습니다. 그리고 각각의 css파일들은 아래와 같습니다.

 

예상대로라면 빨/파/주/하 서로 다른 4개의 div가 생성되여야 합니다. 과연 결과는 어떨까요?

 

어라? 분명 각각의 파일마다 다른 css 파일을 import 했는데 Container1, Container2 의 색깔이 파란색으로 같습니다! css파일 경로로 import 한다고 해서 지역 scope라고 단정지을 수 없습니다. 사실 css파일은 전역으로 적용되기 때문에 className이 같다면 다른 파일을 import해도 위와 같은 결과가 나오게 됩니다.

 

하지만 코드를 짜다보면 ClassName이 중복될 수 밖에 없는데, 그럼 항상 다른 이름을 써줘야 할까요? 물론 그래도 되지만 CSS - Module 을 사용하면 그럴 필요없습니다!

 

 

2. CSS-Module 사용

사용하는 방법은 간단합니다.

1. (이름).css 를 (이름).module.css 로 변경해주세요!

2. import styles from 경로
ex) import styles from "./design/component3.module.css"

3. className 지정
ex) <div className={styles.Container}/>

 

styles를 사용하여 CSS-Module을 사용한다면 (css파일이름)_(기존 className)_(Module)_(임의값) 으로 className을 매핑해주기에 중복으로 덮어씌워질 걱정은 필요없어집니다!

 

 

※ 활용

그렇다면 className을 어떻게 2개 이상 부여할 수 있는지에 대해 알아봅시다. styles.(이름)을 사용하면 고유한 이름 string을 반환하기에 아래처럼 작성해주시면 됩니다.

className={"${styles.Container} ${styles.Relative}"}

 

 

 

---

 

저도 이번에 웹 개발하면서 css를 본격적으로 공부를 시작하다가 맨 처음과 같은 문제점이 생겨서 당황했는데... css 선언이 전역 scope라는 사실이 충격이 컸습니다. 다음에는 position 에 대해 소개해보겠습니다.