[React] React에서 Css module 적용하기

팀 프로젝트하면서 React에서 화면 퍼블리싱을 하면 꼭 내 화면 css가 망가지는 불편했던점이 있었다.

className이나 id에 설정한 이름이 같으면 따로 import를 하지 않았는데도 다른 파일에 전역으로 css가 먹혀서 내 css가 망가져버린다. 그래서 서로 className이나 id에 자기 이름 이니셜을 넣어서 설정하거나 겹치지 않게 아예 길고 복잡하게(?) 설정을 하는 방식으로 진행을 했었다. 나는 이 불편함을 해결할 방법을 찾아본적은 딱히 없고 원래 그런가보다.. 리액트 버그구나.. 하고 넘겼다.

이번에 진행하는 프로젝트 팀에서는 팀원 한명이 css를 모듈화하면 겹칠일이 없다고 무언가를 알려주었다.

처음에 말로만 설명을 들으니 어떻게 사용하는건지 모르겠어서 팀원에게 작업한 파일을 push 부탁하고 pull 받아서 확인했다.

 

Css module이란?

Css Module은 클래스 이름을 자동으로 고유화하여 컴포넌트 단위로 스타일 충돌을 방지하는 Css 파일이다.

 

 

사용 방법

1. TypeScript에서 CSS Modules을 사용할 타입 정의를 제공하기 위한 파일 생성한다.

*.module.css 확장자로 끝나는 css 파일을 모듈로 인식하도록 선언해둔 것이다.

• global.d.ts

// src/global.d.ts
declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
  }

 

2. 사용할 컴포넌트 파일에 import 한다.

css 파일을 .module.css로 파일을 생성하고 사용되는 곳에 import를 해주면 된다.

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

 

3. className, id 이름 앞에 styles. 를 붙여준다.

여기서 한가지 중요한점은 '-' 사용은 불가하고 '_'만 사용이 가능하다.

 <div className={styles.travel_plan_list_header}>

css파일에는 .travel_plan_list_header 로 코드를 작성하면 된다.

.travel_plan_list_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  border-bottom: 3px solid var(--grey-1);
  background-color: var(--white);
}

작업했던 파일을 전부 수정해야하는 번거로움이 있었지만.. css 충돌 방지를 할 수 있어서 좋은것 같다.