스타일 라이브러리
리액트 프로젝트에서 CSS를 적용할 때 다양한 라이브러리를 활용할 수 있다. 일반적인 CSS를 그대로 사용해도 좋지만 별도의 스타일 라이브러리를 활용하는 것은 CSS 파일이 가지고 있는 문제점 때문이다.
.css 파일을 그대로 작성하게 되면 그 파일에 있는 내용은 전역으로 적용된다. 예를 들어서 특정 컴포넌트에 사용할 목적으로 container라는 클래스를 만들어 스타일을 작성했더라도, 만약 다른 컴포넌트에 똑같이 container라는 클래스명을 가진 요소가 있다면 그곳에도 스타일이 적용되게 된다. CSS 파일이 특정 컴포넌트에만 적용되는 것이 아니라 전역으로 적용되기 때문이다. 스타일 라이브러리에서는 컴포넌트 단위로 스타일을 캡슐화하기 때문에 이런 문제가 해결된다.
위의 문제만으로 스타일 라이브러리를 사용하는 것은 아니다. 재사용성과 유지보수가 쉬워지고, 조건에 따라 동적 스타일링을 하기 간편해지기도 하며, 빌드가 간편해지는 등 다양한 장점이 있다.
CSS Module
CSS Module은 가장 쉽게 사용할 수 있는 스타일 라이브러리이다. 가볍고 간단하게 스타일 라이브러리를 활용하고 싶을 때 좋다. 기능 역시 간단한데, 각 컴포넌트별로 스타일을 따로 적용하고 싶을 때 사용하면 된다.
CSS Module은 별도의 라이브러리를 설치하지 않아도 괜찮다. CRA, Next.js, Vite 등의 환경에서 이를 기본적으로 지원해 주기 때문이다.
사용법은 다음과 같다.
① CSS 파일을 만들고, 파일명은 .module.css 형식으로 적는다.
② 해당 CSS 파일을 사용할 컴포넌트에서 다음과 같은 코드로 import 해 온다.
import styles from './style.module.css'
③ 컴포넌트에서 클래스명은 다음과 같이 설정한다.
<div className={styles.container}></div>
위와 같이 작성하면 CSS 파일 내부에 있는 container