[ React ] React + css module 방식

 

 

이번 리액트 복습 기간을 통해 얻어가는 새로운 지식들이 많았다.

이번에 내가 기록할 지식은 React + CSS Modules 방식이다.

 

캠프를 통해 처음 배운 React + CSS 방식은 styled-components 사용 방식이다.

https://gggimmin-development-technology.tistory.com/27

[ React ] CSS-in-JS 방식을 통한 Component 꾸미기

 

내 생각으로는 하나의 컴포넌트안에 그 컴포넌트에 필요한 css를 작성하는

styled-components 방법이 제일 편하다고 생각한다.

하지만 이번에 배운 CSS + Module 방식도 별도의 CSS Module 파일을 만들어 정리하면

하나의 컴포넌트 안에 스타일도 다 집어넣은 styled-components 방식보다 깔끔할 수도 있다 생각했다.

 

 

CSS Module 파일은 다음과 같다.

내가 css를 적용시킬 파일 (Button.js) 아래에

Button.module.css 라는 이름의 css 파일을 생성한다.

 

 

클래스 네임을 지정하고 스타일을 넣어주는건 일반 css 와 다를게 없다.

 

 

Button.js 파일에 css 모듈 파일인 ./Button.module.css를 import 해준다. 

 

 

css를 적용시킬 button 태그안에 className={styles.btn} 을 통해

내가 Button.module.css 파일에 지정한 스타일 .btn 을 불러온다.

 

그럼 위와 같이 버튼에 css 가 잘 적용되는 것을 볼 수 있다.

 

 

만약 다른 곳에서 클래스 네임이 겹친다면..?

module.css 방식은 클래스 네임이 겹쳐도 임포트해온 css를 문제없이 잘 적용해준다.

그 이유는,

 

 

module.css 방식은 클래스 네임이 겹치더라도

스스로 뒤에 랜덤한 텍스트를 부여하면서 css 가 겹치지 않게 만들어준다.

그러므로 이 파일에서 사용한 클래스 네임이... 

저기에서도 쓰이나? 겹치려나? 라는 고민을 할 필요가 없어진다.