CSS module
리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다.
이럴 때 쓰면 좋다
-
레거시 프로젝트에 리액트를 도입할 때, 기존프로젝트에 있었던 CSS클래스와 이름이 중복되어도 스타일이 꼬이지 않게 해준다.
-
CSS클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙을 만들기 귀찮을 때
연습을 위해서 프로젝트를 만들자.
프로젝트 생성후 따로 설치해야하는 라이브러리는 없다. create-react-app 에는 이미 적용이 되어있어서 파일하나를 생성하고 .module을 붙여주면 된다.
프로젝트에 component 폴더 생성후 그 안에 CheckBox.js를 생성한다.
import React from "react";
function CheckBox({checked,children, ...rest}) {
return (
<div>
<label>
<input type="checkbox" checked={checked} {...rest}/>
<div>{checked ? '체크됨' : '체크 안됨'}</div>
</label>
<span>
{children}
</span>
</div>
);
}
export default CheckBox;App.js에 CheckBox.js를 렌더링 시킨다.
import React ,{useState} from 'react';
import CheckBox from "./components/CheckBox";
function App() {
const [check, setCheck] = useState(false);
const onChange = (e) => {
setCheck(e.target.checked);
}
return (
<div>
<CheckBox onChange={onChange} checked={check}>다음약관에 모두 동의</CheckBox>
</div>
)
}
export default App;
맨 위의 체크박스를 지우고, 체크 안됨이라는 문구 대신에 체크 되었을 경우에는 체크박스로, 체크가 되어있지 않으면 빈박스를 나타내게 할 것이다.
먼저 yarn add react-icons를 입력하여 react-icons를 설치한다. react-icons는 리액트에서 기본적으로 제공하는 이미지들을 사용할 수 있다. 이미지의 목록에 대한 정보는
https://react-icons.github.io/react-icons/ 로 가보면 확인 할 수 있다. 나는 Material Design icons 에서 MdCheckBox, MdCheckBoxOutlineBlank 아이콘을 사용할 것이다.
이전에 체크 유무에 따른 문구로 출력됨, 출력안됨이라고 설정한 것을 아이콘으로 대체한다.
<div>{checked ? <MdCheckBox/> : <MdCheckBoxOutlineBlank/>}</div>다시 렌더링을 돌려보면,
체크박스가 2개가 되었다.
그럼이제 css Module을 만들어보자. components 폴더안에 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.125rem;
font-weight: bold;
}
.icon {
display: flex;
align-items: center;
font-size: 2rem;
margin-right: 0.25ren;
color: #adb5db //아이콘의 기본 스타일
}
.checked{
color: #339af0 // 체크 되었을때 색의 변화
}그럼 이 모듈을 컴포넌트에 사용해보자.
CheckBox 컴퍼넌트에 css모듈파일을 import 하고 console.log로 내용을 출력하면
위와 같이 객체에 우리가 선언했던 클래스들이 고유값을 지닌채로 출력되어있다. 이 고유한 값을 가지는 클래스들을 className으로 지정하여 사용할 것이다.
import React from "react";
import {MdCheckBox, MdCheckBoxOutlineBlank} from 'react-icons/md'
import styles from './CheckBox.module.css';
function CheckBox({checked,children, ...rest}) {
return (
<div className={styles.checkbox}>
<label>
<input type="checkbox" checked={checked} {...rest}/>
<div className={styles.icon}>
{checked ? (
<MdCheckBox className={styles.checked}/>
) : (
<MdCheckBoxOutlineBlank/>
)}
</div>
</label>
<span>
{children}
</span>
</div>
);
}
export default CheckBox;checkbox label에 커서를 올리면 손가락 모양이 나타나고, input엘리먼트는 보이지 않게 숨기고, icon의 크기과 색깔을 조정했다.
만약에 모듈에서 사용해야할 클래스가 여러개일 경우
`${styles.checkbox} ${styles.무슨무슨}`이런식으로 작성해야하는데 매우 번거로움이 있을수 있다. 이럴 때 사용하는것이 classnames인데, classnames에 있는 bind를 사용한다.
우선 calssnames를 설치하고 import로 불러온다.
그다은 bind를 호출하는 변수를 선언한다.const cx = classNames.bind(styles)
이제 여러개의 클래스를 사용해야 할 경우 전의 classnames처럼 간편하게 작성이 가능하다
className = {cx('checkbox', '무슨무슨', '이것저것', )}이런 방식으로 작성이 가능하다.
import React from "react";
import {MdCheckBox, MdCheckBoxOutlineBlank} from 'react-icons/md'
import styles from './CheckBox.module.css';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
function CheckBox({checked,children, ...rest}) {
return (
<div className={cx('checkbox')}>
<label>
<input type="checkbox" checked={checked} {...rest}/>
<div className={cx('icon')}>
{checked ? (
<MdCheckBox className={cx('checked')}/>
) : (
<MdCheckBoxOutlineBlank/>
)}
</div>
</label>
<span>
{children}
</span>
</div>
);
}
export default CheckBox;수정후 실행해보면 같은 결과를 볼 수 있다.
