✅ React 기초 강좌

✅ localStorage에 다크모드 저장

• 다크모드 상태(darkMode)를 localStorage에 저장
• 앱이 새로 고침되거나 다시 켜져도 사용자의 테마 상태를 유지

📄 App.jsx - localStorage 연동 적용

import { useEffect, useState } from 'react';
import ThemeToggle from './components/ThemeToggle';
import './styles/theme.css';

function App() {
  // ✅ 1. 초기 상태를 localStorage에서 가져오기
  const [darkMode, setDarkMode] = useState(() => {
    const stored = localStorage.getItem('darkMode');
    return stored === 'true'; // 문자열 → boolean
  });

  // ✅ 2. 상태가 바뀔 때 localStorage에 저장
  useEffect(() => {
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

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

export default App;

✅ 작동 방식 정리

🧪 예시 테스트

1. 브라우저에서 다크모드 전환 버튼 클릭
2. 새로고침 해도 이전 상태 유지됨 (localStorage 확인 가능)

GitHub - heroyooi/react-app at bs1_resolve

✅ 다크모드 상태를 Context로 전역 관리하기

🎯 목표

📁 폴더 구조

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

📄 1. context/DarkModeContext.jsx

import { createContext, useContext, useEffect, useState } from 'react';

const DarkModeContext = createContext();

export function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(() => {
    const stored = localStorage.getItem('darkMode');
    return stored === 'true';
  });

  useEffect(() => {
    localStorage.setItem('darkMode', darkMode);
  }, [darkMode]);

  return (
    <DarkModeContext.Provider value={{ darkMode, setDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

// ✅ 사용용 커스텀 훅
export function useDarkMode() {
  return useContext(DarkModeContext);
}

📄 2. components/ThemeToggle.jsx

import { useDarkMode } from '../context/DarkModeContext';

function ThemeToggle() {
  const { darkMode, setDarkMode } = useDarkMode();

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

export default ThemeToggle;

📄 3. App.jsx

import { DarkModeProvider, useDarkMode } from './context/DarkModeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles/theme.css';

function AppContent() {
  const { darkMode } = useDarkMode();

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

export default function App() {
  return (
    <DarkModeProvider>
      <AppContent />
    </DarkModeProvider>
  );
}

✅ 완성된 흐름

DarkModeProvider
└── AppContent
    ├── ThemeToggle (useDarkMode로 전역 상태 사용)
    └── 다른 컴포넌트에서도 사용 가능

🔍 장점

🧪 테스트 시나리오

• ThemeToggle을 어디에 두든 다크모드 상태 작동해야 함
• 새로고침해도 상태 유지되어야 함 (localStorage)
• 다른 컴포넌트에서도 useDarkMode()로 접근 가능

GitHub - heroyooi/react-app at bs1_resolve2