9 CSS 리액트에 넣는 5가지 방법

1. Inline Style(인라인 스타일) — 태그 안에 직접 쓰기

1.1 개념

HTML(에이치티엠엘)에서 style="color:red" 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체(Object, 오브젝트) 형태로 작성한다.

리액트는 JavaScript(자바스크립트)를 기반으로 동작한다. JSX(제이에스엑스) 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, background-color 처럼 하이픈(-)이 들어간 속성은 backgroundColor 처럼 카멜케이스(camelCase) 로 바꿔서 써야 한다.

1.2 기본 예제

1
function App() {
2
  return (
3
    <h1 style={{ color: "tomato", fontSize: "32px" }}>
4
      🍅 맛있는 리액트!
5
    </h1>
6
  );
7
}

줄	설명
3	`style={{ ... }}` — 바깥 `{}`는 JSX 표현식, 안쪽 `{}`는 객체를 나타낸다.
3	`color: "tomato"` — 색상을 문자열로 지정한다.
3	`fontSize: "32px"` — `font-size`를 카멜케이스로 바꿔 쓴다.

1.3 변수로 분리하기 (추천)

1
function App() {
2
  const titleStyle = {
3
    color: "tomato",
4
    fontSize: "32px",
5
  };
6

7
  return <h1 style={titleStyle}>🍅 맛있는 리액트!</h1>;
8
}

줄	설명
2~5	스타일을 변수 `titleStyle`에 저장한다. 코드가 길어질수록 이 방식이 읽기 편하다.
7	`style={titleStyle}` — 변수를 바로 넣는다. 중괄호가 한 쌍만 있으면 된다.

요약

인라인 스타일은 작은 컴포넌트(component, 컴포넌트)에 빠르게 스타일을 줄 때 유용하다. 하지만 스타일이 많아지면 코드가 지저분해지므로 규모가 커지면 다른 방법을 사용한다.

2. CSS File(씨에스에스 파일) — 별도 파일로 분리하기

2.1 개념

.css 파일을 따로 만들고, 컴포넌트 파일에서 import(임포트) 해서 사용하는 방식이다. 가장 기본적이고 익숙한 방법이다.

2.2 파일 구조

1
src/
2
├── App.jsx
3
└── App.css

2.3 App.css 작성

1
.title {
2
  color: royalblue;
3
  font-size: 32px;
4
}
5

6
.card {
7
  background-color: #f0f4ff;
8
  border-radius: 8px;
9
  padding: 16px;
10
}

줄	설명
1	`.title` — 클래스(class, 클래스) 선택자(selector, 셀렉터)로 스타일 규칙을 정의한다.
6	`.card` — 카드 영역에 적용할 스타일 묶음이다.

2.4 App.jsx 작성

1
import "./App.css";
2

3
function App() {
4
  return (
5
    <div className="card">
6
      <h1 className="title">🎮 게임 점수판</h1>
7
    </div>
8
  );
9
}

줄	설명
1	`import "./App.css"` — CSS 파일을 불러온다.
5	`className="card"` — HTML의 `class` 대신 `className` 을 쓴다. 리액트 규칙이다.

주의

리액트에서는 class 대신 반드시 className을 사용해야 한다. class는 JavaScript의 예약어이기 때문이다.

3. CSS Module(씨에스에스 모듈) — 클래스 이름 충돌 방지

3.1 개념

파일 이름을 이름.module.css 로 저장하면, 클래스 이름이 자동으로 고유하게 변환된다. 여러 컴포넌트에서 같은 클래스 이름을 써도 서로 충돌하지 않는다.

일반 CSS 파일을 여러 개 불러오면, 같은 클래스 이름(.title 등)이 서로 덮어써서 의도하지 않은 스타일이 적용될 수 있다. CSS 모듈은 이 문제를 자동으로 해결해 준다.

3.2 파일 구조

1
src/
2
├── Score.jsx
3
└── Score.module.css

3.3 Score.module.css 작성

1
.box {
2
  background-color: #fff3cd;
3
  padding: 20px;
4
  border-radius: 12px;
5
}
6

7
.name {
8
  color: #333;
9
  font-weight: bold;
10
}

3.4 Score.jsx 작성

1
import styles from "./Score.module.css";
2

3
function Score() {
4
  return (
5
    <div className={styles.box}>
6
      <p className={styles.name}>🏆 1등: 망고</p>
7
    </div>
8
  );
9
}

줄	설명
1	`import styles from "..."` — CSS 모듈을 객체로 불러온다.
5	`styles.box` — 객체의 속성처럼 클래스 이름에 접근한다.
6	`styles.name` — 자동으로 고유한 클래스명으로 변환된다.

정보

실제로 브라우저에서 확인하면 클래스 이름이 Score_box__xK2jA 처럼 변환되어 있는 것을 볼 수 있다. 이것이 충돌을 막아 주는 원리이다.

4. Styled-Components(스타일드 컴포넌트) — JS 안에서 CSS 쓰기

4.1 개념

CSS를 JavaScript 코드 안에 문자열로 작성하는 방식이다. 컴포넌트와 스타일이 한 파일에 있어서 관리가 편하다.

4.2 설치

1
npm install styled-components

4.3 기본 예제

1
import styled from "styled-components";
2

3
const Btn = styled.button`
4
  background-color: coral;
5
  color: white;
6
  padding: 10px 20px;
7
  border: none;
8
  border-radius: 8px;
9
  cursor: pointer;
10
`;
11

12
function App() {
13
  return <Btn>🎯 클릭하세요!</Btn>;
14
}

줄	설명
1	`import styled from "styled-components"` — 라이브러리를 불러온다.
3	styled.button`...` — `button` 태그에 스타일을 입힌 새 컴포넌트를 만든다.
4~9	백틱(backtick, 백틱) 안에 일반 CSS 문법 그대로 작성한다.
13	`<Btn>` — 만들어진 스타일 컴포넌트를 일반 컴포넌트처럼 사용한다.

1
const Btn = styled.button`
2
  background-color: ${(props) => (props.primary ? "royalblue" : "gray")};
3
  color: white;
4
`;
5

6
// 사용
7
<Btn primary>파란 버튼</Btn>
8
<Btn>회색 버튼</Btn>

props.primary가 있으면 파란색, 없으면 회색이 된다. 버튼 종류가 많을 때 매우 유용한 패턴이다.

5. Tailwind CSS(테일윈드 씨에스에스) — 클래스 이름으로 스타일 조합하기

5.1 개념

미리 만들어진 수백 개의 클래스를 조합해서 스타일을 적용하는 방식이다. 별도의 CSS 파일을 작성하지 않아도 된다.

5.2 Vite(바이트) 프로젝트에 설치

1
npm install -D tailwindcss @tailwindcss/vite

5.3 vite.config.js 설정

1
import tailwindcss from "@tailwindcss/vite";
2
import { defineConfig } from "vite";
3

4
export default defineConfig({
5
  plugins: [tailwindcss()],
6
});

5.4 index.css 에 추가

1
@import "tailwindcss";

5.5 기본 예제

1
function Card() {
2
  return (
3
    <div className="bg-yellow-100 p-6 rounded-xl shadow">
4
      <h2 className="text-2xl font-bold text-gray-800">🌟 오늘의 퀘스트</h2>
5
      <p className="text-gray-500 mt-2">몬스터 10마리 처치하기</p>
6
    </div>
7
  );
8
}

줄	설명
3	`bg-yellow-100` — 배경색, `p-6` — 패딩(padding, 패딩), `rounded-xl` — 둥근 모서리, `shadow` — 그림자
4	`text-2xl` — 글자 크기, `font-bold` — 굵게, `text-gray-800` — 글자 색상
5	`mt-2` — 위쪽 여백(margin-top, 마진탑)

요약

테일윈드는 클래스 이름 자체가 스타일을 설명하기 때문에, CSS를 잘 모르는 입문자도 빠르게 결과를 볼 수 있다는 장점이 있다.

5가지 방법 비교표

방법	별도 파일	CSS 문법	클래스 충돌 방지	추천 상황
Inline Style(인라인 스타일)	✗	✗ (객체)	✓	동적 스타일, 빠른 테스트
CSS File(씨에스에스 파일)	✓	✓	✗	소규모 프로젝트, 입문 단계
CSS Module(씨에스에스 모듈)	✓	✓	✓	컴포넌트별 스타일 분리
Styled-Components(스타일드 컴포넌트)	✗	✓	✓	동적 스타일이 많은 프로젝트
Tailwind CSS(테일윈드)	✗	✗ (클래스)	✓	빠른 개발, 디자인 시스템

실습 과제

아래 조건을 만족하는 컴포넌트를 만들어 보자.

이름: Profile
배경색: lightyellow
이름 텍스트: 글자색 darkblue, 크기 24px
한 줄 소개: 글자색 gray

1
function Profile() {
2
  const wrap = { backgroundColor: "lightyellow", padding: "20px" };
3
  const name = { color: "darkblue", fontSize: "24px" };
4
  const bio  = { color: "gray" };
5

6
  return (
7
    <div style={wrap}>
8
      <h2 style={name}>🧑‍💻 김망고</h2>
9
      <p style={bio}>리액트를 공부중인 개발자 지망생입니다.</p>
10
    </div>
11
  );
12
}

ScoreBoard.module.css 와 ScoreBoard.jsx 를 만들어서 아래 기능을 구현해 보자.

1등, 2등, 3등 이름과 점수를 표시한다.
1등은 금색(gold) 배경을 적용한다.

1
.item { padding: 10px; border-radius: 8px; margin: 4px 0; }
2
.gold { background-color: gold; }

1
import s from "./ScoreBoard.module.css";
2

3
function ScoreBoard() {
4
  return (
5
    <div>
6
      <div className={`${s.item} ${s.gold}`}>🥇 망고 — 9800점</div>
7
      <div className={s.item}>🥈 하늘 — 8700점</div>
8
      <div className={s.item}>🥉 바다 — 7600점</div>
9
    </div>
10
  );
11
}