React

React에서 CSS 적용하기: 3가지 방법과 활용법

코딩 코디네이터 2025. 4. 4. 08:00

React에서 CSS 적용하기 : 3가지 방법과 활용법

여러분, 리액트 개발할 때 CSS 스타일링 어떻게 하세요?
막막하거나 헷갈릴 때 많지 않나요?

안녕하세요, 여러분!

오늘은 리액트(React)로 웹앱을 만들면서 가장 자주 부딪히는 문제 중 하나,

바로 "어떻게 CSS를 적용할까?"에 대한 이야기를 해보려고 해요.

저도 처음 리액트를 접했을 때는 기존처럼 CSS 파일만 쓰면 되는 줄 알았는데, 시간이 갈수록 방법이 많아지더라구요.

그래서 오히려 뭐가 좋고 나쁜지 더 헷갈렸던 기억이 납니다. 😵

이번 글에서는 React에서 가장 널리 사용되는 3가지 CSS 적용 방식을 정리하고,

각각 어떤 상황에서 쓰면 좋은지 실전 코드 예제와 함께 소개해드릴게요.

마지막에는 장단점 비교표도 있으니 끝까지 봐주세요!

1. 일반 CSS 파일 사용하기

React에서 가장 기본적이고 직관적인 방식이죠.

전통적인 CSS 파일을 작성해서, 해당 파일을 컴포넌트에서 import해서 사용하는 방식입니다.

만약 기존 HTML/CSS로 작업해본 경험이 있다면 이 방식이 가장 익숙할 거예요.

📘 사용 방법 예제

아래는 styles.css 파일과 App.js 컴포넌트에서 적용한 예제입니다.

/* styles.css */
.container {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 10px;
}

.text {
  color: darkblue;
  font-size: 16px;
}

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

function App() {
  return (
    <div className="container">
      <p className="text">Hello, React!</p>
    </div>
  );
}

export default App;

✅ 장점

익숙하고 간단하다 – 기존 HTML+CSS 경험이 있다면 바로 적용 가능
빠르게 스타일링 적용 가능해서 소규모 프로젝트에 적합

⚠️ 단점

클래스명이 전역(Global)이라서 컴포넌트 간 이름 충돌 발생 가능성 있음
규모가 커질수록 유지 관리가 어려워질 수 있음

💡 언제 사용하면 좋을까?

간단한 프로젝트나 초기 개발 프로토타입을 빠르게 만들 때 가장 효율적이에요.

기존 웹 페이지 구조를 React로 옮기는 작업에서도 유용하죠.

다만 팀 프로젝트나 규모가 커지는 경우엔 충돌 위험이 커질 수 있으니 조심하세요!

2. 인라인 스타일링 (Inline Style)

이번에는 인라인 스타일링입니다. HTML의 style 속성을 떠올리시면 되는데, React에서는 조금 다르게 JavaScript 객체 형태로 작성해야 해요. 특히 동적으로 스타일을 바꾸는 상황에서 자주 활용됩니다.

🧪 사용 방법 예제

import { useState } from 'react';

function App() {
  const [isActive, setIsActive] = useState(false);

  const style = {
    backgroundColor: isActive ? "lightcoral" : "lightblue",
    padding: "20px",
    borderRadius: "10px",
    color: isActive ? "white" : "darkblue",
    fontSize: "18px",
  };

  return (
    <div style={style}>
      <p>Hello, Dynamic React!</p>
      <button onClick={() => setIsActive(!isActive)}>Toggle Style</button>
    </div>
  );
}

export default App;

보이시죠?

상태값(isActive)에 따라 배경색이나 글자 색이 즉시 바뀌는 구조입니다.

이게 인라인 스타일링의 강점이에요.

✅ 장점

조건부 스타일 적용이 매우 간편함
컴포넌트에 스타일이 묶여 있어서 유지보수 쉬움

⚠️ 단점

스타일 재사용이 어렵다 – 다른 컴포넌트에서 동일한 스타일 쓰려면 복붙해야 함
코드가 지저분하고 복잡해질 수 있음 – 스타일이 JSX 안에 섞이기 때문에 가독성이 떨어질 수도 있음

💡 언제 사용하면 좋을까?

동적으로 상태가 바뀔 때마다 스타일을 조정해야 하는 경우, 인라인 스타일링은 최적의 선택이 될 수 있어요.

단순한 버튼 색상 변경이나 알림창처럼 UI 반응형 요소 구현 시 정말 유용하답니다.

3. CSS 모듈 (CSS Module)

이번엔 조금 더 고급스럽고 안전한 스타일링 방법인 CSS 모듈에 대해 알아볼게요.

CSS 파일을 컴포넌트 단위로 모듈화하여 클래스 이름 충돌을 원천 차단해 주는 방식입니다.

그래서 중대형 프로젝트에서 특히 많이 쓰이는 스타일링 방법이기도 해요.

🧩 사용 방법 예제

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

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

function Button() {
  return (
    <button className={styles.button}>Click Me</button>
  );
}

export default Button;

보시는 것처럼 className에 직접 문자열이 아닌 객체로 접근하는 게 포인트예요.

styles.button처럼요.

이 덕분에 컴포넌트마다 고유한 클래스명이 자동 생성돼서, 충돌 걱정 없이 안심하고 스타일링할 수 있습니다.

✅ 장점

클래스 이름이 자동으로 유니크해짐 – 충돌 걱정 NO!
유지보수 용이하고 모듈별로 스타일 관리 가능

⚠️ 단점

초심자에겐 약간의 진입 장벽이 있을 수 있음 (모듈 시스템 이해 필요)
모듈 경로 관리가 귀찮을 수 있음 – 파일 수 많아지면 번거로움

💡 언제 사용하면 좋을까?

프로젝트가 커지고, 컴포넌트 수가 많아질수록 CSS 모듈의 힘이 발휘됩니다.

클래스 네이밍 충돌이 잦아지고, 스타일 유지보수가 어려워질 때, CSS 모듈은 진짜 구세주처럼 느껴질 거예요.

팀 프로젝트에서는 사실상 필수입니다. 😉

4. 세 가지 방식 비교표

지금까지 소개한 일반 CSS 파일, 인라인 스타일링, CSS 모듈은 각각 고유한 특징이 있고, 용도에 따라 적절한 선택이 필요합니다. 한눈에 비교할 수 있도록 표로 정리해봤어요.

방식	장점	단점
일반 CSS 파일	📌 간단하고 익숙함 📌 빠르게 적용 가능	📌 클래스 네임 충돌 가능성 있음 📌 전역 스타일로 유지보수 어려움
인라인 스타일링	📌 동적 스타일 적용 용이 📌 컴포넌트 내부 스타일 관리 가능	📌 스타일 재사용 어려움 📌 코드 복잡성 증가
CSS 모듈	📌 클래스 충돌 방지 📌 유지 관리 용이	📌 처음에는 학습 필요 📌 모듈 파일 수 증가

TIP 💬

단점이 있다고 해서 피할 필요는 없어요!

각 방식은 상황에 따라 정말 강력한 무기가 될 수 있습니다.

중요한 건 어떤 방식이 현재 프로젝트 상황과 개발 스타일에 가장 잘 맞느냐예요.

예를 들어,

간단한 개인 포트폴리오 사이트에는 일반 CSS 파일만으로도 충분할 수 있고, 상태 기반으로 UI가 자주 바뀌는 대화형 페이지라면 인라인 스타일이 딱이에요.

규모가 큰 협업 프로젝트라면 CSS 모듈은 거의 필수 수준이죠.

5. 상황별 추천 활용법 💡

세 가지 스타일링 방식 모두 장단점이 뚜렷하다 보니, 어떤 걸 써야 할지 고민이 될 수 있어요.

그래서 제가 직접 써보면서 얻은 실전 기준을 기준으로 상황별 추천 조합을 정리해봤어요.

🧠 이런 경우엔 이렇게 써보세요!

상황	추천 스타일링	비고
🧪 빠른 프로토타입 제작	일반 CSS 파일	쉽고 빠르게 적용 가능
🎨 동적인 UI 스타일 필요	인라인 스타일링	상태 변화에 따른 실시간 적용
🛠 컴포넌트 수 많은 대규모 프로젝트	CSS 모듈	클래스 충돌 방지, 유지보수 편리
👨‍👧 팀 단위 협업	CSS 모듈 + BEM 방식 병행	코드 일관성 확보
🧩 재사용 가능한 UI 컴포넌트 개발	CSS 모듈	스타일의 지역화에 적합

그리고 꼭 하나만 고집할 필요는 없어요!

혼합해서 사용하는 것도 좋은 전략입니다.

예를 들어

전역 테마는 일반 CSS 파일로, UI 컴포넌트는 CSS 모듈로, 버튼 hover 효과는 인라인 스타일로 처리하는 식으로요.

💬 한마디만 더!

실무에서는 정답보다 팀의 합의와 협업 스타일이 더 중요하더라구요.

각 방식의 특성과 상황을 이해하고, 유연하게 선택할 수 있다면 그게 진짜 ‘프로 개발자’ 아닐까요?

6. 마무리 🎁

React에서 스타일을 입히는 방법은 정말 다양합니다.

오늘 알아본 일반 CSS 파일, 인라인 스타일링, CSS 모듈은 그중에서도 가장 기본적이고 실무에서 자주 쓰이는 방식들이에요.

각 방식은 프로젝트의 성격, 팀 규모, 유지보수의 난이도 등에 따라 유불리가 분명하니, 이번 기회에 내 상황에 맞는 스타일링 전략을 세워보세요. 🧭

마지막 팁 💬

혼합해서 쓰는 것도 전략입니다!

특히 디자인 시스템을 갖춘 프로젝트라면, 공통 요소는 CSS 파일로, 개별 컴포넌트는 CSS 모듈로 관리하고, 일부 상호작용 요소는 인라인 스타일로 처리하면 정말 유용해요.

이제 CSS 때문에 머리 아프지 마세요.

React에서도 스타일링은 충분히 깔끔하고 체계적으로 관리할 수 있으니까요. 😊

티스토리