[react] module css 적용하기

사실 todo list는 sass를 사용해서 모든 스타일을 적용하고 있었는데,

곧 진행 예정인 토이플젝에서는 module css를 사용하기로 이야기 되어서

최대한 미리 공부해 보기 위해 전부 리펙토링하게 되었다.

🎀 쓰는 이유

컴포넌트형 환경에서 class 중첩이 일어나는 것을 막아준다.

이게 module을 쓰는 가장 중요한 이유인 것 같음.

🎀 설치법(?)

{파일명}.module.css 만 붙이세요.

정말이다.
달리 npm i 할 것도 없음.
만약 Button.css 파일이 있다면, Button.module.css로 변경만 해주면 끝!

🎀 사용법

우선 module.css 파일 import해 준다.

import style from './css/App.module.css';

css 파일의 경우 평소 적듯이 코드 짜주면 된다.
대신 js 파일에서는 아래와같이 className을 써줘야한다.

const TodoItem = () => {

    return (
        <div className={style.TodoListItem}></div>
      );
}

export default TodoItem;

이렇게 써줘야 적용이 된다.

🎀 className 여러개

const TodoItem = () => {

    return (
        <div className={`${style.TodoListItem} ${style.TodoListBlack}`}></div>
      );
}

export default TodoItem;

진짜 쉽다.
근데 style 자꾸 붙여줘야하는데 너무 귀찮다...

🎀 결과

위 이미지처럼 module이 알아서 고유한 태그를 class에 붙여준다.

🎀 classnames와 함께 사용

import { MdCheckBoxOutlineBlank, MdCheckBox, MdRemoveCircleOutline, MdOutlineModeEdit } from "react-icons/md";
import cn from "classnames";
import style from "../css/TodoItem.module.css";

const TodoItem = () => {
    const { id, text, checked } = todo;

    return (
        <div className={style.TodoListItem}>
          <div className={cn(style.checkbox, { checked })} onClick={() => onToggle(id)}>
            {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
          </div>
        </div>
      );
}

export default TodoItem;

classname과 같이 사용도 가능하니 참고...