[React] React 에 컴포넌트 별로 CSS 적용하기

라액트를 사용해서 개발하는 것을 처음 경험해 보았다! 프로젝트를 하면서 프로젝트 구조에도 신경 쓰게 되었다. 개발하다 보니 컴포넌트 파일이 많이 생기게 되어서 컴포넌트별로 CSS 도 따로 관리하고 싶어서 CSS 파일을 분리하게 되었다. 

 

파일 분리 후 이슈

엇 그런데 문제가 생겼다. 분명 난 A, B 두 개의 컴포넌트가 있고 A.css 와 B.css 를 만들었고 해당하는 컴포넌트에 맞는 css 를 import 해서 사용을 했는데 A.css 에 추가한 스타일이 B 컴포넌트에도 적용이 되고 있었다. 🤯 띠용

그 이유를 찾아보니까 css 파일의 스타일은 기본적으로 전역으로 적용된다고 한다. React 는 css 를 특별히 제한하지 않는다나 뭐라나... 아무튼 이러한 이유로 파일 분리가 의미없나 싶었는데 다른 방법이 있었다! 

 

컴포넌트별로 독립적인 스타일을 적용하는 방법이 있는데 CSS Modules, CSS-in-JS, scoped CSS 등 여러 가지 방법이 있다. 어느 것은 라이브러리를 설치해야 하는 것도 있고 어느 것은 복잡해 보여서 가장 심플해보이는 CSS Modules 방식을 선택했다. 

 

CSS Moduels 방식 적용

1. 파일명을 '파일명.modules.css' 와 같이 변경한다.

 

2. 아래와 같은 형식으로 import 한다.

import styles from "../style/파일명.module.css";

 

3. 적용방법은 styles. 을 써야한다.

<div className={styles.클래스명}>

 

이런 방법으로 컴포넌트 별로 css 를 적용할 수 있다. 해당 방식으로 css 를 적용하니까 클래스명 충돌 걱정도 없고 좋다!