리액트 프로젝트에서 CSS 모듈을 사용하면 각 컴포넌트의 CSS 스타일이 전역으로 적용되는 것을 방지하고, 스타일의 충돌을 방지할 수 있습니다. 이 글에서는 리액트 프로젝트에서 CSS 모듈을 어떻게 사용하는지 알아보겠습니다.

CSS 모듈이란?

CSS 모듈은 CSS 파일을 컴포넌트에 로드할 때 각 클래스 이름을 고유한 이름으로 자동으로 생성하여 동일한 이름의 클래스가 다른 컴포넌트에서 충돌하지 않도록 해줍니다.

CSS 모듈 사용 방법

1. CSS 모듈 활성화 설정

먼저, Create React App을 사용하고 있다면 별도의 설정 없이 CSS 모듈을 사용할 수 있습니다. 사용 중인 환경에 따라 다르지만, 보통 따로 설정할 필요가 없습니다.

2. CSS 모듈 파일 작성

CSS 파일을 작성할 때 일반적인 방식으로 스타일을 작성하되, .module.css 확장자를 사용하여 파일을 저장합니다. 예를 들어, App.module.css와 같이 명명할 수 있습니다.

/* App.module.css */
.container {
  padding: 20px;
  background-color: #fff;
}
.title {
  font-size: 24px;
  color: #333;
}

3. 리액트 컴포넌트에서 CSS 모듈 사용

리액트 컴포넌트에서 해당 CSS 모듈을 불러와서 사용합니다.

// App.js
import React from 'react';
import styles from './App.module.css'; // CSS 모듈 불러오기

function App() {
  return (
    <div className={styles.container}> {/* 고유한 클래스명을 사용 */}
      <h1 className={styles.title}>Hello, React!</h1>
    </div>
  );
}

export default App;

이렇게 함으로써 각 컴포넌트에서 고유한 클래스명을 사용하며 CSS 스타일을 충돌시키지 않을 수 있습니다.

CSS 모듈을 사용하면 리액트 애플리케이션의 스타일 관리를 더욱 효율적으로 할 수 있습니다. 이를 통해 재사용 가능한 컴포넌트를 작성하고 유지보수하기 쉽게 만들 수 있습니다.

CSS 모듈의 사용 방법에 대해 간략히 소개해보았습니다. 이제 CSS 모듈을 사용하여 리액트 애플리케이션을 개발할 때 스타일링을 더욱 효과적으로 관리할 수 있을 것입니다.

더 많은 정보를 원하시면 공식 문서를 참고하시기 바랍니다.