[CSS Module] class명에 이상한 텍스트가 추가되었어요

 

 

위 그림은 네이버 홈페이지의 한 부분이다. class 뒤에 tL023, wLQj 등의 문자가 들어있는 것을 확인할 수 있다. 직접 넣어준 건가?

리엑트 프로젝트를 만들어서 요소를 분석해 보면 위 그림과 같이 랜덤성의 문자들이 class 이름 뒤에 붙어 있는 것을 확인할 수 있다.

이 문자들은 CSS 모듈과 연관이 있다.

 

CSS 모듈은 커지는 프로젝트에서 원하는 곳에 원하는 css를 혼동 없이 지정하기 위한 방법이다.

보통 우리는 .IUclass { ... }   처럼 css 파일을 작성한다.

그런데 프로젝트가 점점 커짐에 따라 class 명이 겹칠 수 있는 가능성이 커지기 마련이다. 모든 클래스명을 기억하면서 지을 수 없기 때문이다. 이런 포인트에서 CSS 모듈은 힘을 발휘한다. 필요한 곳에서만 모듈을 불러와서 디자인을 적용하면 된다. 그러면 혹시나 같은 이름의 class가 다른 곳에 있더라도 전혀 영향을 받지 않는다.

 

CSS모듈 파일작성은 아래와 같다.

[모둘명].module.scss

그러고 해당 파일을 import 해주면 준비는 끝난다. 그리고 나서 원하는 태그에 className에 추가해 주면 된다.

import Styles from '경로';

<div className={Styles.[클래스명]} />

 

이 과정에서 선언된 클래스명이 모두 고유의 이름으로 자동 변환된다고 한다. 위에 서 봤던 tL023, wLQj 등의 텍스트가 추가되는 것이다. 따로 설정해 줄 필요도 없기 때문에 완전 분리를 보장받는다. 

 

 

 

 

이런 이유로 Reat 프로젝트에서 html를 까보면 알 수 없는 값들이 요소마다 붙어있던 것이다. 고로 무시해도 된다ㅓ 

 

 

 

참조 : https://www.tcpschool.com/react/react_styling_cssmodule