[CSS Module] css 이름 꼬이지 않고 편하게 쓰기

류태오·2022년 6월 9일

CSS front end scss

Front-end

목록 보기

5/13

강의 내용

벨로퍼트와 함께하는 모던 리액트 · GitBook

2장. 리액트 컴포넌트 스타일링하기
2-2. CSS Module
https://react.vlpt.us/styling/02-css-module.html

CSS module이란?

컴포넌트 별로 CSS를 적용해주어 다른 컴포넌트의 동일 이름과 충돌되지 않도록 해주는 방식 (아래의 이미지처럼 별도의 key값을 알아서 붙여줌)

기존 커다란 프로젝트가 있을 때 네이밍 규칙을 고민하지 않아도 되기 때문에 매우 유용함

사용 방법

프로젝트 생성

npx create-react-app 이름 // *별도의 설치가 필요 없음

파일 이름 규칙

1) 파일을 만들 때 파일명을 .module.css 또는 .module.scss로 끝내면 된다.
2) 불러올 때 import styles from “./파일명.module.css”; 로 불러오면 끝

리액트 아이콘 사용

설치 : yarn add react-icons
링크 : https://react-icons.github.io/react-icons/

사이트에서 각 아이콘 불러오는 법이 나와 있음

아래와 같이 컴포넌트식으로 불러와 사용 가능

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

 <div><MdCheckBox/></div>

글로벌/로컬 사용 법

모듈 사용 시 글로벌화

/* sample.module.css */
:global .name {
}

/* sample.module.scss */
:global {
.name { }
}

모듈을 사용하지 않았을 때 로컬화

/* sample.css */
:local .name {
}

/* sample.scss */
:local {
.name { }
}

classnames의 활용 bind

설치 : yarn add classnames

백틱을 이용해서 아래와 같이 적어야하는 것을 classnames의 bind를 사용하면 줄여서 쓸 수 있다

`$(styles.checkbox) $(styles.noname)`

import classNames from ‘classnames/bind’;
const cx = classNames.bind(styles);
cx('checkbox', 'noname')

코드

CheckBox.js

import React from 'react';
import styles from './CheckBox.module.css'; // (1) 모듈
import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; // (2) 아이콘 불러오기
import classNames from 'classnames/bind'; // (3) 바인드 불러오기

const cx = classNames.bind(styles); // (3) 바인드 활용

function CheckBox({checked, children, ...rest}) {
    return (
        <div className={cx('checkbox', 'noname')}> // (3) 바인드 활용
            <label>
                <input type="checkbox" checked={checked} {...rest}/>
                <div className={styles.icon}>{checked ? <MdCheckBox className={styles.checked}/> : <MdCheckBoxOutlineBlank/>}</div> // (2) 아이콘 불러오기
            </label>
            <span>{children}</span>
        </div>
    );
}

export default CheckBox;

App.js

import CheckBox from "./components/CheckBox";
import React, { useState } from 'react';

function App() {
  const [check, setCheck] = useState(false);
  const onChange = (e) => {
    setCheck(e.target.checked);
  }
  return (
    <div className="App">
      <CheckBox onChange={onChange} checked={check}> 다음 약관에 모두 동의 </CheckBox>
    </div>
  );
}

export default App;