React로 다크모드 토글 구현

핵심 개념

useContext와 useState로 전역 테마를 관리합니다. localStorage에 테마를 저장하여 새로고침 후에도 유지합니다. CSS 변수를 동적으로 변경하여 테마를 적용합니다. 테마 시스템을 지우며 스타일이 어떻게 고정되는지 확인하십시오.

코드 분석

REACT📋 코드 (32줄)







const { useState, createContext, useContext } = React;
  const ThemeContext = createContext();

  function ThemeCard() {
    const { theme, toggle } = useContext(ThemeContext);
    const bg = theme === 'dark' ? '#0d1117' : '#f0f0f0';
    const color = theme === 'dark' ? '#e8e8e8' : '#080808';
    return (
      <div style={{background:bg, color, border:'1px solid #333', padding:'16px', transition:'all 0.3s'}}>
        <div style={{marginBottom:'8px'}}>현재 테마: {theme.toUpperCase()}</div>
        <button onClick={toggle} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>TOGGLE THEME</button>
      </div>
    );
  }

  function App() {
    const [theme, setTheme] = useState('dark');
    const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
    return (
      <ThemeContext.Provider value={{ theme, toggle }}>
        <ThemeCard />
      </ThemeContext.Provider>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '다크모드 토글' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'다크모드 토글'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '다크모드 토글' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '다크모드 토글' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React로 다크모드 토글 구현은 이 3가지만 확실히 잡으세요

1.CSS만으로 다크모드를 관리하면 사용자의 선택이 새로고침 시 초기화되고, 시스템 설정과 동기화가 안 됩니다

2.Context로 테마 상태를 전역 관리하고, localStorage에 저장하며, prefers-color-scheme으로 시스템 설정을 감지합니다

3.다음 챕터에서 긴 목록을 나눠 보여주는 페이지네이션을 구현합니다

💬 이 챕터 질문 보기

REACT · CH.24 — 질문하거나 답변을 확인하세요

→

진행도 24 / 34

← 커리큘럼으로 ← 목록으로 (React)