React에서 CSS를 효과적으로 관리하는 방법

React로 프로젝트를 진행하다 보면 CSS를 관리하는 방법에서 여러 문제를 경험할 수 있습니다.
특히 CSS 파일을 import했을 때 스타일이 전체 페이지에 적용되는 글로벌 범위 문제는 초보자에게 혼란을 줄 수 있습니다.

이번 글에서는 React에서 CSS의 기본 동작 방식을 이해하고, 이를 컴포넌트 단위로 제한하는 방법을 소개합니다.

---

React에서 CSS의 기본 동작

React에서 CSS 파일을 import하면, 해당 CSS는 애플리케이션 전체에 영향을 미칩니다.
즉, 특정 컴포넌트에만 적용하고 싶어도 동일한 클래스 이름이 다른 컴포넌트에도 영향을 줄 수 있습니다.

예제: CSS의 글로벌 범위 문제

/* styles.css */
.title {
    color: red;
}

// App.js
import './styles.css';

const App = () => {
    return <h1 className="title">Hello</h1>;
};

이 경우, className="title"을 사용하는 다른 컴포넌트에도 color: red;가 적용됩니다.
React는 기본적으로 CSS의 범위를 특정 컴포넌트로 자동 제한하지 않습니다.

---

CSS의 글로벌 문제를 해결하는 방법

React에서 CSS 범위를 컴포넌트 단위로 제한하거나 관리하기 위한 몇 가지 전략이 있습니다.

---

1. CSS 모듈 (CSS Modules)

CSS 모듈은 클래스 이름을 고유하게 만들어 CSS 충돌 문제를 방지합니다.
파일 이름에 .module.css를 붙여 사용하며, React는 클래스 이름을 고유한 해시 값으로 변환합니다.

사용 방법

1. CSS 파일 이름을 파일명.module.css로 작성합니다.
2. 해당 CSS 파일을 import합니다.
3. 클래스 이름을 객체처럼 사용합니다.

/* styles.module.css */
.title {
    color: blue;
}

import styles from './styles.module.css';

const App = () => {
    return <h1 className={styles.title}>Hello</h1>;
};

결과

className이 자동으로 고유한 이름으로 변환됩니다:

<h1 class="title__abc123">Hello</h1>

---

2. CSS-in-JS와 Styled-Components

CSS-in-JS는 CSS를 JavaScript 코드 내부에 작성하는 방식입니다.
이 방식은 스타일이 특정 컴포넌트에 국한되며, JavaScript 로직과 스타일을 같은 파일에서 관리할 수 있습니다. 가장 인기 있는 라이브러리로 styled-components가 있습니다.

사용 방법

1. styled-components 라이브러리를 설치합니다.

   npm install styled-components

2. 스타일을 정의한 뒤 컴포넌트처럼 사용합니다.

   import styled from 'styled-components';
   
   const Title = styled.h1`
       color: green;
   `;
   
   const App = () => {
       return <Title>Hello</Title>;
   };

결과

<Title>이라는 React 컴포넌트는 고유한 클래스 이름을 가진 DOM 요소로 렌더링됩니다:

<h1 class="Title__xyz456">Hello</h1>

---

3. SCSS (SASS)와 네이밍 규칙

SCSS(SASS)는 기존 CSS를 확장한 스타일 언어로, 중첩 규칙과 변수를 지원하여 더 구조적인 CSS 작성이 가능합니다.

사용 방법

1. SCSS 파일을 작성합니다.

   /* styles.scss */
   .App {
       .title {
           color: purple;
       }
   }

2. 해당 SCSS 파일을 import합니다.

   import './styles.scss';
   
   const App = () => {
       return (
           <div className="App">
               <h1 className="title">Hello</h1>
           </div>
       );
   };

결과

CSS 클래스는 명확한 네이밍 규칙을 따라 다른 컴포넌트와 충돌하지 않습니다:

<div class="App">
    <h1 class="title">Hello</h1>
</div>

---

어떤 방법을 선택해야 할까?

간단한 프로젝트

• CSS 모듈: 설정이 간단하며, 컴포넌트 단위로 스타일을 분리할 수 있습니다.

복잡한 스타일 관리

• Styled-Components: JavaScript 코드와 스타일을 통합해서 작성할 수 있어 유지보수가 쉽습니다.
• SCSS(SASS): 변수와 중첩 구조를 통해 복잡한 스타일을 관리하기 좋습니다.

---

결론

React에서는 기본적으로 CSS가 글로벌 범위로 적용됩니다.
이 문제를 해결하려면 CSS 모듈, Styled-Components, 또는 SCSS와 같은 도구를 활용해 스타일을 컴포넌트 단위로 관리하는 것이 중요합니다.

요약

1. CSS 모듈로 클래스를 고유하게 만들어 충돌을 방지.
2. Styled-Components로 JavaScript 내부에서 스타일 작성.
3. SCSS를 사용해 구조화된 CSS 관리.

이제 React에서 CSS를 관리할 때 발생하는 문제를 해결하고, 더 깔끔하고 효율적인 스타일링을 구현해 보세요!