1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// DarkModeContext.js

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

// 다크 모드 상태를 저장하고 토글하는 Context 생성
const DarkModeContext = createContext();

// 다크 모드 상태를 제공하는 Provider 컴포넌트 생성
export const DarkModeProvider = ({ children }) => {
    // 다크 모드 상태를 useState를 통해 관리
    const [isDarkMode, setIsDarkMode] = useState(false);

    // 다크 모드 상태를 토글하는 함수
    const toggleDarkMode = () => {
        setIsDarkMode(!isDarkMode); // 상태를 반대로 전환
    };

    // Provider 컴포넌트에서는 자식 컴포넌트들에게 상태와 토글 함수를 전달
    return (
        <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
            {children}
        </DarkModeContext.Provider>
    );
};

// useContext를 통해 다크 모드 Context에 접근할 수 있는 훅
export const useDarkMode = () => useContext(DarkModeContext);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// App.js

import React from 'react';
import { DarkModeProvider } from './DarkModeContext';
import MainComponent from './MainComponent';

function App() {
    // DarkModeProvider를 사용하여 다크 모드 Context를 애플리케이션에 제공
    return (
        <DarkModeProvider>
            {/* MainComponent를 렌더링 */}
            <MainComponent />
        </DarkModeProvider>
    );
}

export default App;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// MainComponent.js

import React from 'react';
import { useDarkMode } from './DarkModeContext';

const MainComponent = () => {
    // 다크 모드 상태와 토글 함수를 가져옴
    const { isDarkMode, toggleDarkMode } = useDarkMode();

    return (
        <div className={isDarkMode ? 'dark' : 'light'}>
            {/* 버튼을 클릭하면 토글 함수를 호출하여 다크 모드를 전환 */}
            <button onClick={toggleDarkMode}>
                {isDarkMode ? '라이트 모드로 전환' : '다크 모드로 전환'}
            </button>
            {/* 현재 모드에 따라 표시되는 텍스트가 변경됨 */}
            <h1>{isDarkMode ? '다크 모드' : '라이트 모드'}</h1>
        </div>
    );
};

export default MainComponent;