✅ React 기초 강좌

🎯 학습 목표

• 다크모드 on/off 상태를 useState로 관리한다.
• 조건부 CSS 클래스(className)로 테마를 전환한다.
• 글로벌 스타일 적용을 위해 간단한 CSS를 작성한다.

🧱 구현 개요

📁 구성 예시

src/
├── App.jsx
├── components/
│   └── ThemeToggle.jsx
├── styles/
│   └── theme.css

📄 1. App.jsx – 다크모드 적용 Wrapper

import { useState } from 'react';
import ThemeToggle from './components/ThemeToggle';
import './styles/theme.css'; // 전역 스타일 import

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={darkMode ? 'dark' : 'light'}>
      <div className="app-container">
        <h1>🌗 다크모드 예제</h1>
        <ThemeToggle darkMode={darkMode} setDarkMode={setDarkMode} />
      </div>
    </div>
  );
}

export default App;

📄 2. components/ThemeToggle.jsx

function ThemeToggle({ darkMode, setDarkMode }) {
  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      {darkMode ? '☀️ 라이트 모드' : '🌙 다크 모드'}
    </button>
  );
}

export default ThemeToggle;

📄 3. styles/theme.css – 다크/라이트 스타일 정의

/* 전역 스타일 */

body {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
}

.app-container {
  padding: 2rem;
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

/* 라이트 테마 */
.light {
  background-color: #ffffff;
  color: #222;
}

/* 다크 테마 */
.dark {
  background-color: #1f1f1f;
  color: #f5f5f5;
}

✅ 결과

버튼 클릭 시 테마가 부드럽게 전환됩니다 (transition 덕분에!)

GitHub - heroyooi/react-app at bs1

✍️ 과제

1. 다크모드 상태를 localStorage에 저장해서 새로고침 후에도 유지되도록 만들기

   👉 useEffect + localStorage.getItem/setItem

2. 다크모드 상태를 Context로 전역 관리해보기

   👉 여러 컴포넌트에서 다크모드 상태를 공유하고 싶을 때 유용