<ReactJs> CSS Module (styles)

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 을 사용하면 클래스이름이 중복되는 것을 완전히 방지 할 수가 있다.

언제 CSS module 을 사용해야 유용한가

 

1. 기존에 존재하는 프로젝트에서 특정 부분에 리액트를 도입할 때 클래스명이 겹쳐서 이상한 결과를 초래할 일이 없다.

2. 클래스 네이밍 규칙을 무시 할 수 있다. ('-'를 써주어야 하거나 대문자 소문자로 약속이 되어 있는 상태일 때)

 

 

단순하게 CSS module 을 사용해주려면 확장자를 .module.css 혹은 .module.scss 등으로 우선 작성해준 뒤에 

컴포넌트에서 import 해줄 때 

import styles from '~~경로 및 이름.module.css';

위와 같이 작성해주면 CSS module을 가져다가 쓸 수가 있다. 

 

우선 체크박스를 이용한 예제를 CSS module로 스타일링 해주기 전에 화면을 보자.

 

 

 

 

 

우선 이벤트 타겟을 이용해 눌릴 때마다 문구가 바뀌게 해주고 체크박스 컴포넌트를 호출 해주고 있다.

이제 Checkbox.module.css (모듈파일) 에 스타일을 작성한 뒤에 import 해주겠다.

 

//Checkbox.module.css

.checkbox{
    display: flex;
    align-items: center;
}

.checkbox label{
    cursor: pointer;
}
.checkbox input{
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}
.checkbox span{
    font-size: 1.3rem;
    font-weight: bold;
}
.icon{
    display:flex;
    align-items: center;
    font-size: 2rem;
    margin-right: 0.25rem;
    color: gray;
}
.checked{
    color:blue;
}

import 해준뒤에 styles객체를 콘솔로 찍어보면

 

고유 이름을 가진채로 클래스명이 생긴 것을 확인 할 수 있다. 

 

react-icons 는 폰트어썸 같은 오픈소스 라이브러리로 아이콘을 폰트처럼 사용 할 수 있게 되서 스타일 먹이기에 매우 편해진다. 나중에 폰트어썸 및 웹 폰트 사용법도 다루어 보겠다. 

 

 

사진과 같이 styles 객체를 한번 타고 들어가서 우리가 지정해주었던 checkbox, icon, checked 등을 꺼내줘서 사용해주면 되겠다.

 

선택 하기 전

선택 후

정상적으로 스타일이 먹은 것을 확인 할 수가 있다.