다크 모드는 최신 웹 앱의 필수 기능입니다. 사용자 경험을 향상시키고 눈의 피로를 줄일 수 있습니다. 이 게시물에서는 Context API를 사용하여 React 앱에서 다크 모드 토글을 구현하여 전역적으로 상태를 관리하는 방법을 살펴보겠습니다.
사용자가 어두운 모드와 밝은 모드 사이를 전환할 수 있는 간단한 앱을 만들겠습니다. 기본 설정은 localStorage에 저장되어 페이지를 떠나거나 다시 로드한 후에도 유지됩니다.
첫 번째 단계는 앱의 모든 구성 요소에 어두운 모드 상태와 토글 기능을 제공하는 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를 업데이트하고 적절한 클래스를 본문 요소에 적용합니다.
여기에서는 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;
어두운 모드가 작동하는 모습을 보려면 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; }
여기서 전체 앱을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!