React- CSS module

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

CSS module

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

 CSS Module 를 사용 할 때에는 CSS 파일의 확장자를 .module.css 로 하면 된다.

그렇게 파일을 만들게 되면 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 모두 고유해진다.

그리고 CSS module은 리액트에 기본적으로 포함되어 있기 때문에 별도로 라이브러리를 설치할 필요가 없다.

 

CSS module을 사용함으로써의 장점은

클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없다.

 

 그래서 다음과 같은 상황에 사용하면 유용하다.

1. 레거시 프로젝트에 리액트를 도입할 때 (기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 해준다.)

2. CSS 클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙을 만들기 귀찮을 때

 

 

CSS module로 체크박스 스타일링 하기

스타일링을 하기 전에 react-icons 라이브러리를 설치해서 적절한 아이콘을 불러오도록 한다.

npm add react-icons 명령어로 설치를 하면 되는데 이 라이브러리는  Font Awesome, Ionicons, Material Design Icons 등의 아이콘들을 컴포넌트 형태로 쉽게 사용할 수 있다.

라이브러리의 문서를 들어가면 원하는 다양한 아이콘들을 불러와서 사용하면 된다.

 

여기서는 Material Design Icons 의 MdCheckBox, MdCheckBoxOutline 을 사용하겠다.

 

components/CheckBox.module.css

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

.checkbox label {
    cursor: pointer;
}

.checkbox input { /* 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; /* 아이콘의 크기는 font-size로 지정해줄 수 있다. */
    margin-right: 0.25rem;
    color: #adb5bd;
}

.checked {
    color: #339af0; /* 체크했을 때의 색 */
}

 

CSS Module 을 작성 할 때에는 CSS 클래스 이름이 다른 곳에서 사용되는 CSS 클래스 이름과 중복될 일이 없기 때문에 .icon, .checkbox 같은 짧고 흔한 이름을 사용해도 상관이 없다.

 

components/CheckBox.js

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; // 리액트 아이콘 라이브러리로 아이콘 불러옴
import styles from './CheckBox.module.css';

function CheckBox({ children, checked, ...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;

CSS Module 을 사용 할 때에는 styles.icon 이런 식으로 객체안에 있는 값을 조회해야 하는데 이것이

번거롭다면 classnames 라이브러리의 bind기능을 사용하면 된다.

 

설치 명령어 npm add classnames

 

그리고 나서 아래와 같이 CheckBox.js 파일을 수정하면 된다.

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md"; // 리액트 아이콘 라이브러리로 아이콘 불러옴
import styles from './CheckBox.module.css';
import classNames from 'classnames/bind'; // classnames/bind는 css 모듈을 사용할 때 더 쉽게 사용하게 해줌

const cx = classNames.bind(styles); // classNames 라이브러리를 사용해서 styles를 넣어주면 클래스에 스타일을 넣어줄 때 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;

classnames 의 bind 기능을 사용하면, CSS 클래시 이름을 지정해 줄 때 cx('클래스이름') 과 같은 형식으로 편하게 사용 할 수 있다.

 

App.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>
    
  );
}

App.js 파일에서 useState로 박스체크에 대한 상태관리 이벤트 코드를 작성해주고

CheckBox 컴포넌트를 불러와 준다.

 

실행 결과