useContext의 기초

이 후크를 사용하면 구성 요소(함수 구성 요소)가 React Context에 액세스할 수 있으므로 전체 구성 요소 트리를 명시적으로 이동하지 않고도 부모에서 자식으로 props를 전송할 수 있습니다.

이 기능을 사용하려면 다음 단계를 따라야 합니다.

컨텍스트 만들기

import React from "react";

const toggleDarkModel = () => {};

const theme = {
    darkModeActive: false,
    toggleDarkModel,
};

const ThemeContext = React.createContext(theme);

export default ThemeContext;

toggleDarkModel은 추후 구현될 함수로 함수 컴포넌트에 의해 상태를 조작하는 것이 목적입니다.

앱에 공급자 추가

import React, { useState } from "react";

import ThemeContext from "./context/ThemeContext";
// Other components

function App() {
    const [darkModeActive, setDarkModeActive] = useState(mode);
    const toggleDarkModel = () => {
        setDarkModeActive(!darkModeActive);
    };
    return (
        <ThemeContext.Provider value={{ toggleDarkModel, darkModeActive }}>
        //App goes here
        </ThemeContext.Provider>
    );
}

export default App;

보시다시피 함수 구성 요소에는 toggleDarkModel 구현이 있습니다.

필요할 때마다 컨텍스트를 사용합니다.

컨텍스트를 사용하려면 useContext를 가져와야 합니다.

import React, { useContext } from "react";
import ThemeContext from "../context/ThemeContext";

const Header = () => {
    const { toggleDarkModel, darkModeActive } = useContext(ThemeContext);
    return (
        <div className="Header container">
            <h1 className="title">Crypto Swag</h1>
            <button onClick={toggleDarkModel} className={`button is-small ${darkModeActive ? "is-white" : "is-dark"}`}>
                <span className="icon is-small">
                    <i className={`mdi ${darkModeActive ? "mdi-lightbulb-on" : "mdi-lightbulb-off"}`}></i>
                </span>
            </button>
        </div>
    );
};

export default Header;