CSS Module 사용해보기

리액트 프로젝트를 새로 생성합니다

생성 후 추가적으로 라이브러리를 설치할 필요는 없습니다 내장에 포함되어있고,

명칭만 .module.css 로 생성합니다

$ npm run start

src 폴더에 components 폴더 생성 후 CheckBox.js 파일을 만들어줍니다

먼저 컴포넌트 틀을 잡아줍니다

import React from 'react'

function CheckBox() {
  return (
    <div>
      
    </div>
  )
}

export default CheckBox

input을 만들어주고 props로 checked값을 가져옵니다

function CheckBox({ checked }) {
  return (
    <div>
      <label>
        <input type="checkbox" />
      </label>
    </div>
  );
}

만약에 checked 값이 true 라면 "체크" 라고 보여줍니다 그렇지 않으면 '체크 안됨' 이라고 보여줍니다

 <div>{checked ? '체크' : '체크 안됨'}</div>

children props도 가져옵니다

function CheckBox({ checked, children })

<span>{children}</span>

이제 이 컴포넌트를 App.js에서 랜더링 해주겠습니다

import CheckBox from "./components/CheckBox";

function App() {
  <div>
    <CheckBox>약관에 모두 동의</CheckBox>
  </div>;
}

export default App;

CheckBox의 상태 관리를 위해 useState를 사용합니다

import React, { useState } from "react";

Boolean값을 관리하는 useState를 만듭니다

function App() {
  const [check, setCheck] = useState(false);
  <div>
    <CheckBox>약관에 모두 동의</CheckBox>
  </div>;
}

onChange라는 함수를 만들어서 e.target.checked값을 넣어줍니다

 const onChange = () => {
    setCheck(e.target.checked);
  };

그리고 괄호에 e를 넣어줄껀데 onChange가 발생했을 떄 해당 이벤트 객체를 참조해서 checked 값을 가져오는 역할을 합니다

const onChange = (e) =>

checkBox에 onChange값과 checked값을 넣어줍니다

<div>
    <CheckBox onChange={onChange} checked={check}>
      약관에 모두 동의
    </CheckBox>
  </div>;

onChange값과 checked값을 CheckBox.js에 있는 input에 전달해줘야합니다

...rest를 이용해서 나머지 props를 ...rest 객체로 받아옵니다

function CheckBox({ checked, children, ...rest })

받아온 ...rest 객체를 input에 전달해줍니다

<input type="checkbox" {...rest} />

이렇게되면 checked, children를 제외한 나머지 Props니까 onChange를 가져오게됩니다

checked는 이미 Boolean체크하는 부분에서 빼놨으니 직접 넣어줍니다

<input type="checkbox" checked={checked} {...rest} />

이제 input 박스를 숨기고, 체크 안됨 대신에 리액트 react-icons 라이브러리를 활용해서 체크박스여부를 보여주도록 하겠습니다

스타일링은 css module을 통해 처리하겠습니다

react-icons 설치

React Icons

$ npm install react-icons --save

react-icons는 여러 종류의 오픈소스 아이콘들을 골라 가져와서 사용할 수 있습니다

그 중에서 흔히 쓰이는 Material Design icons를 사용하겠습니다

저는 MdCheckBox, MdCheckBoxOutlineBlank 라는 아이콘을 사용하겠습니다

해당 아이콘을 사용하려면 먼저 import를 해야합니다 공식문서 최상단에 보면 import 방법이 작성되어있습니다

CheckBox.js에 불러옵니다

import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";

문자열로 적은 체크, 체크안됨을 아이콘으로 변경합니다

아이콘은 컴포넌트 형태로 작성합니다

<label>
        <input type="checkbox" checked={checked} {...rest} />
        <div>{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}</div>
      </label>

이제 css를 꾸며주겠습니다

.module.css를 기반으로 생성합니다

components 폴더 내에 CheckBox.module.css 파일명으로 생성합니다 module이라는 명칭이 들어간게 중요하니 꼭 포함시키도록 합시다

CheckBox.module.css 에서는 다른 파일과 클래스명이 중복되는지 걱정할 필요가 없습니다

이제 input을 꾸며주겠습니다

.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.25rem;
  color: #adb5bd;
}

.checked {
  color: #339af0;
}

다 꾸몄으니 css 파일을 불러오겠습니다

CheckBox.js에 작성합니다

import styles from "./CheckBox.module.css";

콘솔에서 보면 이렇게 module.css로 인해 고유한 명칭이 생긴걸 확인할 수 있습니다

css에서 꾸며준대로 클래스명을 className으로 넣어줬습니다

<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>

정리하자면

import styles from "./CheckBox.module.css";

module.css를 꾸민 후에 임포트로 불러오고

styles.checkbox 처럼 객체 안에 클래스 이름이 들어있고 해당 객체에서 값을 조회해서 사용하면됩니다

 

만약에 클래스명을 두개를 써야한다고 가정하면 보통은 이런 방식으로 사용해야합니다

 <div className={`${styles.checkbox} ${styles.testClass}`}>

하지만 번거로우니 다른 방식을 사용합니다

sass에서 사용했던데로 classNames를 사용합니다

classNames에는 css module과 사용할 때 유용한 유틸리티가 있습니다

먼저 classnames를 설치합니다

$ npm install classnames

import로 불러옵니다

classnames가 아닌 classnames/bind를 불러옵니다

import classNames from "classnames/bind";

bind는 css를 사용할 때 좀 더 쉽게 사용할 수 있게 해주는 유틸리티 입니다

const cx = classNames.bind(styles)

기존에 classNames 함수를 작성했던것처럼 사용합니다

<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>

여기서 여러개의 클래스를 넣을 땐 콤마를 찍고 사용합니다

<div className={cx("checkbox", 'testbox')}>

scss에서도 module를 사용할 수 있습니다

scss에서 module 다루기는 다음에 알아보도록 하겠습니다