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

---

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

1.1 개념

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

1.2 기본 예제

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

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

function App() {
  const titleStyle = {
    color: "tomato",
    fontSize: "32px",
  };

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

---

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

2.1 개념

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

2.2 파일 구조

src/
├── App.jsx
└── App.css

2.3 App.css 작성

.title {
  color: royalblue;
  font-size: 32px;
}

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

2.4 App.jsx 작성

import "./App.css";

function App() {
  return (
    <div className="card">
      <h1 className="title">🎮 게임 점수판</h1>
    </div>
  );
}

---

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

3.1 개념

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

3.2 파일 구조

src/
├── Score.jsx
└── Score.module.css

3.3 Score.module.css 작성

.box {
  background-color: #fff3cd;
  padding: 20px;
  border-radius: 12px;
}

.name {
  color: #333;
  font-weight: bold;
}

3.4 Score.jsx 작성

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

function Score() {
  return (
    <div className={styles.box}>
      <p className={styles.name}>🏆 1등: 망고</p>
    </div>
  );
}

---

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

4.1 개념

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

4.2 설치

npm install styled-components

4.3 기본 예제

import styled from "styled-components";

const Btn = styled.button`
  background-color: coral;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
`;

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

---

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

5.1 개념

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

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

npm install -D tailwindcss @tailwindcss/vite

5.3 vite.config.js 설정

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

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

5.4 index.css 에 추가

@import "tailwindcss";

5.5 기본 예제

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

---

5가지 방법 비교표

---

실습 과제