useContext의 어두운 면

나는 당신에 대해 모르지만 나는 어두운 모드를 좋아합니다. 새 앱을 열 때마다 가장 먼저 하는 일은 불을 끌 방법을 찾는 것입니다. 미학적으로 더 보기 좋은 것(페이지의 모든 것이 어두운 배경에서 실제로 튀어나옴) 외에도 어두운 모드는 모든 텍스트와 버튼이 밤하늘의 별처럼 빛나서 탐색을 더 쉽게 만듭니다. Aa그리고 당신이 문자 그대로 어두운 곳에 있으면 눈이 더 편합니다. 많은 장점과 단점이 전혀 없는 이 특정 기능을 React 애플리케이션에 적용하는 것은 쉬운 일이 아닙니다! 내가 생각하는 최적의 솔루션으로 넘어가기 전에 앱을 어두운 시대로 가져오는 몇 가지 (일종의) 다양한 방법을 검토해 보겠습니다.


useState: 참 또는 거짓

React에서 다크 모드 토글을 추가하는 것은 페이지에 적용되는 CSS 스타일을 제어하는 ​​데 사용할 상태 변수를 만드는 것만큼 간단합니다. React의 useState 후크에 익숙하지 않은 경우 문서here를 확인하십시오. 이 첫 번째 방법에서는 부울 값을 상태 변수로 사용합니다.

// ./src/components/App

import React, { useState } from 'react'
import ChildComponent from './ChildComponent'

const App = () => {
  // Create state variable for dark mode with a default value
  // of false
  const [darkMode, setDarkMode] = useState(false)

  // Write callback function for the toggle button;
  // can also be written inline as 
  // () => setDarkMode(darkMode => !darkMode)
  function changeMode() {
    setDarkMode(darkMode => !darkMode)
  }

  return (
  // Use ternaries to dynamically update the div className
  // and button text
    <div className={darkMode ? "App Dark" : "App"}>
      <header>
        <h2>My App</h2>
        <button onClick={changeMode}>
          {darkMode ? "Light Mode" : "Dark Mode"}
        </button>
      </header>
  // Pass down state variable through props for children to use
      <ChildComponent darkMode={darkMode} />
    </div>
  );
}

export default App;

이 방법은 단일 버튼이나 체크박스를 사용하여 두 모드 사이를 전환하려는 경우에 가장 적합합니다. 그러나 사용자가 선택할 수 있는 두 개 이상의 테마를 제공하려는 경우 부울 값으로는 충분하지 않습니다.


문자열 변수가 있는 useState

// ./src/components/App

import React, { useState } from 'react'
import ChildComponent from './ChildComponent'

const App = () => {
  // Create state with a default value of "App",
  // the default option of your dropdown below
  const [theme, setTheme] = useState("App")

  // Write callback function for dropdown to update state
  function handleThemeChange(e) {
    setTheme(e.target.value)
  }
  return (
    <div className={theme}>
      <header>
        <h2>My App</h2>
        <select name="theme" onChange={handleThemeChange}>
  // Option values equal CSS classes (.App.Dark, etc)
          <option value="App">Select Theme</option>
          <option value="App Dark">Dark Mode</option>
          <option value="App Blue">Ocean</option>
          <option value="App Purple">Galaxy</option>
        </select>
      </header>
  // Pass down state value through props
      <ChildComponent theme={theme} />
    </div>
  );
}

export default App;

상태 변수를 문자열로 설정하면 모드가 2개이든 20개이든 관계없이 작동하므로 원하는 경우 나중에 더 많은 테마를 추가할 수 있는 유연성을 제공합니다.

이러한 방법은 스타일이 App 수준에서만 처리될 수 있을 만큼 간단하거나 추가 하위 구성 요소 한두 개에서 처리될 수 있는 경우 잘 작동합니다. 다른 CSS 스타일이 필요한 많은 요소가 포함된 보다 광범위한 구성 요소 계층 구조로 작업하는 경우에는 어떻게 해야 합니까? 물론 props를 사용하여 구성 요소 세대를 통해 상태 변수를 전달할 수 있지만 지루하고 지저분해질 수 있습니다. 다른 React hook에 대해 알아보자!


useContext 후크를 사용하여 앱에 다크 모드 추가

React에서 context을 사용하는 것은 많은 구성 요소가 동일한 데이터에 액세스해야 하는 상황에 가장 적합합니다. 전체 앱의 모양을 제어하는 ​​상태 변수와 같은 데이터는 무엇입니까? 생성하려는 컨텍스트에 대한 새 JS 파일을 생성한 다음 상태 변수를 이 파일로 이동하는 것으로 시작합니다.

// ./src/context/theme

import React, { useState } from "react";
// Create a new Context object with... React.createContext()
const ThemeContext = React.createContext();

// Create your Provider component, and set its value to an
// object containing everything to be passed down to consumers
function ThemeProvider({ children }) {
// The state you created before now lives here
  const [theme, setTheme] = useState("App");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}> 
    {children}
    </ThemeContext.Provider>
)}

export { ThemeContext, ThemeProvider }

그런 다음 공급자와 함께 새 컨텍스트를 사용해야 하는 모든 구성 요소를 래핑해야 합니다. 이 경우 index.js 파일로 바로 이동하여 App 구성 요소를 'ThemeProvider'로 래핑합니다.

// ./src/index

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import "./index.css";
import { ThemeProvider } from './context/theme'

ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById("root"));

마지막으로 테마 컨텍스트를 활용할 각 구성 요소는 React의 useContext와 ThemeContext라는 두 가지 새로운 항목을 가져와야 합니다. 그런 다음 useContext 후크를 사용하여 ThemeContext에서 가져오려는 값을 분해하고 자유롭게 사용할 수 있습니다.

// ./src/components/App

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

function App() {
// Pass your new Context object (ThemeContext) as an
// argument to useContext, which returns the current value
// of the Context object, and destructure the data you need
  const { theme, setTheme } = useContext(ThemeContext)

  function handleThemeChange(e) {
    setTheme(e.target.value)
  }
  return (
    <div className={theme}>
      <header>
        <h2>My App</h2>
        <select name="theme" onChange={handleThemeChange}>
          <option value="App">Select Theme</option>
          <option value="App.Dark">Dark Mode</option>
          <option value="App.Blue">Ocean</option>
          <option value="App.Purple">Galaxy</option>
        </select>
      </header>
  // No passing props here! If ChildComponent needs to know
  // about theme, it can talk to our new friend Context
      <ChildComponent />
    </div>
  );
}

export default App;

응용 프로그램 전체에서 다크 모드(또는 다른 사용자가 선택한 테마)의 영광스러운 광채를 경험하기 위해 때로는 사용하지도 않는 구성 요소를 통해 소품을 전달하던 시대는 지났습니다. 컨텍스트는 필요할 때마다 상태 및/또는 세터 기능을 펌핑할 수 있는 기능을 부여하여 더 깨끗한 코드로 어두운 모드를 제공합니다. 암흑기에 오신 것을 환영합니다... 좋은 의미에서요!