[TIL] 23.05.17

Minkyu Shin·2023년 5월 17일

CSS TIL 코드잇 FE 부트캠프 0기 프로젝트

TIL

목록 보기

31/44

오늘의 나는 무엇을 배웠을까?

CSS Module

CSS Module이란?

CSS Module은 CSS 클래스의 중첩을 막아주는 기술이다. CRA 또는 Vite로 만든 프로젝트에서 CSS 파일의 확장자를 .module.css 로 정해주면 CSS 모듈 파일로 취급되고 파일에 선언된 클래스 이름들이 모두 고유해진다. 이 때 CSS 클래스 이름은 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등을 활용하여 고유하게 만들어진다고 한다.

클래스 이름이 고유하게 만들어 지기 때문에 간혹 클래스 이름이 중복되어 원치 않는 곳에서 잘못된 스타일이 적용되는 것을 방지할 수 있다. 또 고유한 클래스 이름이 생성되는 특징 덕분에 짧고 흔한 클래스 이름을 사용해도 문제가 되지 않는다.

사용방법

앞서 설명하였듯 CSS 파일의 확장자를 module.css 로 지정하면 별도의 설정 없이 바로 사용 가능하다.
예시 코드를 살펴보면

// CheckBox.jsx
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;

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

.checked {
  color: #339af0;
}

와 같이 사용이 가능하다. icon 과 같이 너무나도 일반적인 클래스 이름을 사용하더라도 개발자 도구에서 엘리먼트를 확인해보면 고유한 클래스 이름으로 변환되어 적용된 것을 알 수 있다.

classnames 라이브러리

CSS Module을 사용할 때는 styles.checkbox 와 같이 css를 객체형으로 불러와 객체의 값을 조회하여 사용하게 된다. 만약 클래스 이름에 - 가 들어있다면 대괄호 표기법을 사용하여 접근해야 하고, 여러개의 스타일을 적용하거나 조건부 스타일링을 하는 경우에는 더욱 번거롭게 코드를 작성해 줘야 한다.

이때 도움을 줄 수 있는 것이 classnames 라이브러리인데, 해당 라이브러리의 bind 기능을 활용하면 CSS 클래스 이름을 적용할 때 더 편하게 사용할 수 있다.

npm install classnames --save
또는
yarn add classnames

로 프로젝트 디렉토리에 라이브러리를 설치해 준 후에

// ~~
import styles from './example.module.css';
import classNames from 'classnames/bind';

const cn = classNames.bind(styles);

와 같이 코드를 작성해 주면 앞으로 클래스 이름을 지정해 줄 때

cn('example1') // 스타일 적용
cn('example1', 'example2') // 여러 스타일 적용
cn('example1', {example2: valid}) // 조건부 스타일링

와 같이 편하게 작성해 줄 수 있다.

프로젝트

HistoryModal Component 리팩토링

검색 기록 모달 컴포넌트의 틀을 모두 구현하여 오늘 PR을 올리고 팀원들의 코드리뷰를 받았다. 반영해야 할 수정사항은

함수명 변경
컴포넌트 import 경로 절대경로로 수정
isClicked , isOpen state를 하나로 통합하여 활용
-> 버튼이 클릭되면 모달창이 열리는 동작이 일어나므로, 버튼을 클릭하면 isClicked 가 true 가 되고 이 때 변경된 state를 모달 컴포넌트에 prop으로 내려주어도 될 것 같다는 코드리뷰를 받았다. 굳이 2개의 state로 나누어 관리할 필요가 없다는 것이 주요 골자였다. 클릭과 모달창 열림이라는 2가지 동작이 한 state로 관리되므로 변수명 변경이 필요했고, isSearchLogsVisible 로 변경하기로 결정했다. 변수명을 짓는 것이 가장 어렵다...

이었다.
수정 사항을 반영하여 push한 후 merge까지 완료 하였다.
일단, 로컬스토리지에 검색 기록이 저장되는 로직을 구현하기 전까지 GNB 파트에서 할 수 있는 모든 작업을 완료하였다.