Context API를 사용하여 React에서 다크 모드 토글 구축

다크 모드는 최신 웹 앱의 필수 기능입니다. 사용자 경험을 향상시키고 눈의 피로를 줄일 수 있습니다. 이 게시물에서는 Context API를 사용하여 React 앱에서 다크 모드 토글을 구현하여 전역적으로 상태를 관리하는 방법을 살펴보겠습니다.

사용자가 어두운 모드와 밝은 모드 사이를 전환할 수 있는 간단한 앱을 만들겠습니다. 기본 설정은 localStorage에 저장되어 페이지를 떠나거나 다시 로드한 후에도 유지됩니다.

1단계: 컨텍스트 설정

첫 번째 단계는 앱의 모든 구성 요소에 어두운 모드 상태와 토글 기능을 제공하는 ThemeContext를 만드는 것입니다.

// src/context/ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode === 'true' || false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', darkMode);
    document.body.className = darkMode ? 'dark-mode' : '';
  }, [darkMode]);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => !prevMode);
  };

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

여기에서는 useState를 사용하여 localStorage를 기반으로 테마를 초기화합니다. useEffect는 테마가 변경될 때마다 localStorage를 업데이트하고 적절한 클래스를 본문 요소에 적용합니다.

---

2단계: Toggle 구성 요소 만들기

여기에서는 useContext를 사용하여 ThemeContext의 darkModevalue 및ggleDarkMode 함수를 사용합니다.

// src/components/ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const ThemeToggle = () => {
  const { darkMode, toggleDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  );
};

export default ThemeToggle;

---

3단계: 다크 모드 스타일 적용

어두운 모드가 작동하는 모습을 보려면 CSS 스타일을 추가해야 합니다. 단순화를 위해 body 요소에 어두운 테마를 적용하겠습니다.

/* src/styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}

---

4단계: 앱 구성요소 설정

여기서 전체 앱을 ThemeProvider 내부에 래핑하여 다크 모드 상태와 토글 기능을 전역적으로 사용할 수 있도록 합니다.

// src/App.js
import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles.css';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>Dark Mode Toggle with Context API</h1>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

---

React의 Context API를 사용하여 소품 드릴링 없이 앱 전체에서 다크 모드 상태에 쉽게 액세스할 수 있도록 만들었습니다. localStorage를 추가하면 페이지를 다시 로드하거나 다시 방문한 후에도 테마 기본 설정이 유지됩니다.

필요에 따라 더 많은 구성 요소와 스타일을 추가하여 이 기본 구현을 자유롭게 조정할 수 있습니다.

제 작품을 더 보고 싶으시면 제 포트폴리오 vrushikvisavadiya를 확인하세요

위 내용은 Context API를 사용하여 React에서 다크 모드 토글 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!