리액트(React)는 컴포넌트 기반의 라이브러리로, 웹 애플리케이션을 효율적으로 개발할 수 있게 도와줍니다. 이러한 컴포넌트 기반 구조 덕분에 재사용성과 유지보수성이 뛰어난 애플리케이션을 만들 수 있습니다. 하지만, 컴포넌트를 스타일링하는 것은 종종 복잡한 문제로 여겨집니다. 다양한 스타일링 방법 중에서 특히 CSS 모듈(CSS Modules)을 이용한 스타일링은 컴포넌트에 고유한 스타일을 부여할 수 있는 효과적인 방법입니다. 이 글에서는 CSS와 스타일링에 대해 설명하고, CSS 모듈을 활용한 리액트 컴포넌트 스타일링에 대해 심층적으로 탐구해 보겠습니다.

CSS의 기초 이해하기

CSS(카스케이딩 스타일 시트)는 HTML 문서의 프레젠테이션을 정의합니다. 기본적으로 CSS는 선택자(selector)와 속성(property)으로 구성되어 있습니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 속성은 적용할 스타일의 유형을 정의합니다. 예를 들어:

p {
    color: blue;
    font-size: 16px;
}

위의 코드에서 ‘p’는 선택자이고, ‘color’와 ‘font-size’는 속성입니다. CSS는 HTML 문서에 링크되거나 내장될 수 있으며, 다양한 CSS 기법을 통해 스타일을 적용할 수 있습니다.

CSS 모듈이란?

CSS 모듈은 CSS 파일을 모듈화하여 각 컴포넌트에 독립적인 스타일을 정의할 수 있는 방법입니다. 전통적인 CSS 방식에서는 클래스 이름의 충돌과 전역 스타일이 문제가 될 수 있었으나, CSS 모듈을 사용하면 이러한 문제를 해결할 수 있습니다.

CSS 모듈은 기본적으로 다음과 같은 장점이 있습니다:

• 스타일 캡슐화: 각 컴포넌트의 스타일이 서로 격리되어 있어서 이름 충돌을 방지할 수 있습니다.
• 재사용성: 컴포넌트에 특정된 스타일을 쉽게 재사용할 수 있습니다.
• 유지보수 용이성: 스타일의 변경이 다른 컴포넌트에 영향을 미치지 않기 때문에 유지보수가 용이합니다.

CSS 모듈 설정하기

리액트 프로젝트에서 CSS 모듈을 사용하려면, 기본적으로 설정이 필요합니다. Create React App으로 프로젝트를 생성하면, CSS 모듈이 기본적으로 지원됩니다. CSS 모듈을 사용하기 위해서는 파일 이름의 뒤에 ‘.module.css’를 붙여야 합니다. 다음은 CSS 모듈을 설정하는 방법입니다:

// ExampleComponent.module.css
.container {
    background-color: lightgray;
    border: 1px solid gray;
    padding: 16px;
}
.title {
    color: navy;
    font-size: 24px;
}

이제 리액트 컴포넌트에서 이 CSS 모듈을 사용할 수 있습니다:

// ExampleComponent.js
import React from 'react';
import styles from './ExampleComponent.module.css';

const ExampleComponent = () => {
    return (
        

            
Hello, CSS Modules!
        
    );
};

export default ExampleComponent;

CSS 모듈을 이용한 스타일링

이제 CSS 모듈을 적용하여 리액트 컴포넌트를 스타일링하는 예제를 살펴보겠습니다. 먼저, 간단한 리액트 애플리케이션을 위해 CSS 모듈 파일과 컴포넌트를 생성합니다.

1. CSS 모듈 파일 생성

// styles.module.css
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

2. 리액트 컴포넌트 생성

// Button.js
import React from 'react';
import styles from './styles.module.css';

const Button = ({ label, onClick }) => {
    return (
        
            {label}
        
    );
};

export default Button;

위의 Button 컴포넌트는 CSS 모듈을 사용하여 버튼에 스타일을 적용합니다. 버튼은 기본적으로 파란색 배경을 가지며, 마우스를 올렸을 때 다크 블루 색으로 변합니다.

3. Button 컴포넌트 사용하기

이제 Button 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다:

// App.js
import React from 'react';
import Button from './Button';

const App = () => {
    return (
        

            
리액트 CSS 모듈 예제
             alert('Button clicked!')} />
        
    );
};

export default App;

스타일 동적 부여하기

리액트의 강력한 기능 중 하나는 상태(state)를 사용하여 동적으로 스타일을 변경할 수 있다는 점입니다. CSS 모듈은 조건부 렌더링과 결합하여 보다 풍부한 인터페이스를 만들어 줍니다. 다음 예제는 버튼이 클릭될 때 스타일을 변경하는 방법을 보여줍니다:

// ToggleButton.js
import React, { useState } from 'react';
import styles from './styles.module.css';

const ToggleButton = () => {
    const [isClicked, setIsClicked] = useState(false);

    const handleClick = () => {
        setIsClicked(!isClicked);
    };

    return (
        
            {isClicked ? 'Clicked!' : 'Click Me!'}
        
    );
};

export default ToggleButton;

이 예제에서 버튼이 클릭될 때마다 isClicked 상태가 변경되고, 이 상태에 따라 버튼의 스타일이 바뀝니다. styles.active는 버튼을 클릭했을 때 추가하는 스타일입니다.

검증 및 디버깅

스타일링과 관련된 문제는 종종 발생할 수 있습니다. CSS 모듈을 사용할 때 발생할 수 있는 일반적인 문제는 클래스 이름이 잘못 매핑되는 것입니다. 이를 확인하기 위해서는 개발자 도구를 열어 제공된 클래스 이름을 검토해야 합니다. CSS 모듈이 동작하는지 확인하기 위해 불필요한 클래스가 남아 있는지, 원하는 대로 스타일이 적용되었는지 확인합니다.

결론

CSS 모듈을 사용하면 리액트 애플리케이션의 스타일링을 보다 효율적으로 진행할 수 있습니다. 각 컴포넌트에 고유한 스타일을 부여하여 충돌을 방지하고, 유지보수를 쉽게 합니다. 이 글에서는 CSS 모듈의 기본 개념부터 시작하여 기본적인 설정과 동적 스타일링 방법까지 살펴보았습니다. 리액트 개발을 진행하면서 CSS 모듈을 활용하면 더욱 세련되고 깔끔한 UI를 구현할 수 있습니다. 앞으로의 프로젝트에서 CSS 모듈을 적극 활용해 보세요!