컨텍스트 API 및 연결된 React 응용 프로그램의 암흑 모드 사용

이 강좌에서, 우리는 React 프로그램에서 React의 상하문 API와 복원 프로그램을 사용하여 프로그램 테마의 상태를 유지할 것입니다.

목표

이 자습서가 끝나면 다음을 확인하실 수 있습니다.

컨텍스트 API의 작동 방법

Redux 대신 컨텍스트 API를 사용하는 시기

React의 상하문 API를 어떻게 사용하여 React 응용 프로그램에서 암흑 모드를 실현합니까?

선결 조건

이 자습서에서는 React의 기본 원리를 설명하지 않습니다.만약 기본 원리에 만족하지 않는다면, 이 프로젝트를 시작하기 전에 먼저 볼 수 있다. helpful tutorial

개술

이 문서에서는 다음 단계를 설명합니다.

Context API .

When to use the Context API instead of Redux .

Reducers .

Cloning the starter code .

Adding the Context and Reducer .

Consuming the Context .

Recap .

컨텍스트 API

official documentation에 따르면 상하문 API는 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공하여 각 단계에서 수동으로 도구를 전달할 필요가 없다.
다시 말하면, React의 상하문 API는 간단한 문제를 해결하는 데 쓰인다.여러 개의 구성 요소 (직접 하위 구성 요소가 아닌) 에서 필요한 상태를 어떻게 관리하는지, 계속 아래로 전달할 필요가 없습니다.
컨텍스트 API는 세 개의 구성 블록으로 구성됩니다.

컨텍스트 객체

상하문 공급자.

상하문 소비자.

우리는 createContext 방법을 사용하여 상하문 대상을 만들어야 한다.

const Context = createContext();

모든 상하문 대상은 공급자 구성 요소를 가지고 있습니다.상하문을 사용하는 모든 구성 요소는 공급자 구성 요소의 후손이어야 합니다.공급자 모듈은 value 아이템을 받아들여 소비 모듈에 전달됩니다.

<Context.Provider value={value}>
  {/* Children */}
</Context.Provider>;

상하문 대상을 구독하기 위해서, 우리는 useContext 갈고리를 사용하여 createContext 만든 상하문 대상을 전달할 것입니다.
구성 요소가 상하문 대상에 가입할 때, 트리에서 가장 가까운 일치 공급자로부터 현재 상하문 값을 읽습니다.

const context = useContext(Context);

Redux가 아닌 컨텍스트 API를 사용하는 경우

Redux 전체 애플리케이션에 필요한 상태로 중앙 집중식 스토리지를 사용합니다.그것은 상태가 예측 가능한 방식으로만 업데이트될 수 있도록 규칙적으로 보장한다.Redux는 외부 라이브러리이기 때문에 Angular, Flutter 등 다른 프레임워크의 지원을 받는다.
Redux에 대한 더 많은 정보를 알고 싶으면 this tutorial를 보십시오.
소규모 어플리케이션을 구축할 때 컨텍스트 API는 Redux의 완벽한 대안입니다.그것은 더욱 실현하기 쉽다.또한 번들 규모를 줄이고 서비스 편의성을 높입니다.
그러나 이 문서를 작성할 때 상하문 API는 고주파 업데이트를 위해 구축된 것이 아니다.따라서 테마와 인증 등 저주파 업데이트에만 사용해야 합니다.이것은 상하 문장의 값이 변할 때마다 공급자의 하위 구성 요소가 다시 나타나기 때문이다.

감속기

Reducer는 두 개의 매개변수, 현재 상태 및 작업을 포함하는 함수입니다.조작 유형에 따라 함수는 새로운 상태를 되돌려줍니다.
예를 들면 다음과 같습니다.

const reducer = (state, action) => {
  switch (action.type) {
    case "TYPE_1":
      return new_state;

    case "TYPE_2":
      return new_state;

    default:
      return state;
  }
};

useReducer 갈고리는 두 개의 매개 변수, Reducer 함수와 초기 상태를 포함한다.이것은 현재 상태 값과 dispatch 이라는 함수를 되돌려줍니다. 이 함수는 조작 상태에 적용됩니다.

const [state, dispatch] = useReducer(reducer, initialState);

이 상태와 파견을 상하문에 제공하는 프로그램의valueprop에 전달하면 이 상태를 사용하고 사용자의 파견을 사용하여 업데이트할 수 있습니다.

클론 시작 코드

상하문 API와 간소화 프로그램의 사용에 더욱 관심을 가지기 위해 나는 시작 프로그램 코드를 준비했다.너는 GitHub에서 그것을 복제할 수 있다. from this repository저장소의 설명을 참조하십시오.
최종 코드를 보려면 this GitHub Repository을 참조하십시오.
초보자 코드에서, 나는 텍스트가 있는 간단한 화면과 어둠 모드로 전환하는 단추를 설정했다.어둠 모드와 광명 모드에 필요한 모든 CSS 스타일도 작성했습니다.그것들을 보거나 src/App.css에서 자유롭게 편집하십시오.

컨텍스트 및 감축기 추가

src 폴더에 ThemeContext.js라는 새 파일을 만듭니다.
다음 단계에서는 주제에 대한 컨텍스트 객체를 작성합니다.우리는 이 파일에서 이 대상을 내보내야 한다.이것은 우리가 이 상하문을 사용하고자 하는 구성 요소로 가져올 수 있도록 합니다.

export const ThemeContext = createContext();

현재, 우리는 상하문 제공 프로그램으로 모든 구성 요소를 포장하는 데 사용되는 HOC (고급 구성 요소) 를 작성해야 한다.
이 HOC에서 우리는 useReducer 갈고리를 사용하여 상태를 만들고 디스패치 함수를 사용하여 상태를 업데이트하고 공급자 구성 요소에 전달하는 valueprop을 사용해야 한다.
어두운 모드와 밝은 모드 사이를 전환하기 위해 Reducer 함수를 작성해야 합니다.

Realistically, you won't need a reducer for this simple state update. You can just use a normal state and setState from the useState hook. But, for the sake of learning how to use reducers along with the Context API, I'll be using reducers to update the theme state.

초기 상태는 다음과 같습니다.

const initialState = { darkMode: false };

감속기의 기능은 다음과 같습니다.

const themeReducer = (state, action) => {
  switch (action.type) {
    case "LIGHTMODE":
      return { darkMode: false };
    case "DARKMODE":
      return { darkMode: true };
    default:
      return state;
  }
};

지금 우리는 이 themeReducer 함수와 initialState를 useReducer 갈고리에 전달해야 한다.

const [state, dispatch] = useReducer(themeReducer, initialState);

이제 HOC를 작성하여 이 파일에서 내보냅니다.우리는 공급자의value prop에 상태와 분배 함수를 전달해야 합니다.

export function ThemeProvider(props) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return <ThemeContext.Provider value={{ state: state, dispatch: dispatch }}>{props.children}</ThemeContext.Provider>;
}

소비 환경

우리는 ThemeProvider HOC를 상하문을 사용하고자 하는 구성 요소 주위에 포장해야 한다.테마가 응용 프로그램에 전체적인 영향을 미칠 수 있기 때문에 응용 프로그램 구성 요소를 중심으로 토론을 전개합시다.index.js 파일에서 다음과 같이 ThemeProvider를 가져옵니다.

import { ThemeProvider } from "./ThemeContext";

이제 <App></App>로 포장<ThemeProvider></ThemeProvider>합시다.

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

이렇게 하면 주제 컨텍스트가 App 어셈블리의 모든 후손에서 사용할 수 있습니다.App.js 파일에서 ThemeContext와 useContext 갈고리를 가져옵니다.

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

우리는 ThemeContext 대상을 useContext 갈고리에 전달해야 한다.

const theme = useContext(ThemeContext);

useContext 갈고리는 공급자에게valueprop의 대상을 되돌려줍니다.
따라서 어두운 모드 상태에 접근하려면 theme.state.darkMode을 사용합니다.

const darkMode = theme.state.darkMode;

이제 이 상태를 사용하여 요소에 적용할 CSS 클래스 사이를 전환할 수 있습니다.
예를 들어,

<div className={`bg ${darkMode ? "bg-dark" : "bg-light"}`}>

현재 h1 와 p 표시에 대해 같은 작업을 수행합니다.

<h1 className={`heading ${darkMode ? "heading-dark" : "heading-light"}`}>
  {darkMode ? "Dark Mode" : "Light Mode"}
</h1>
<p className={`para ${darkMode ? "para-dark" : "para-light"}`}>
  ...
</p>

다음에 디스패치 함수를 사용하여 어두운 모드와 밝은 모드 사이의 상태를 업데이트해야 합니다.Button.js에서 ThemeContext와 useContext 갈고리를 가져오겠습니다.

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

App.js 파일에서 했던 것과 유사하게 ThemeContext 대상을 useContext 갈고리에 전달해야 합니다.

const theme = useContext(ThemeContext);
const darkMode = theme.state.darkMode;

사용자가 swtich 테마 단추를 눌렀을 때 디스패치 함수를 올바른 형식으로 호출해야 합니다.현재 테마가 밝기 모드에 있다면, 파견 유형은 어두운 모드이고, 반대로도 마찬가지다.
사용자가 단추를 눌렀을 때 함수를 작성하여 단추의 onClick 속성에 전달합니다.

export default function SwitchButton() {
  const theme = useContext(ThemeContext);
  const darkMode = theme.state.darkMode;

  const onClick = () => {
    if (darkMode)
      theme.dispatch({ type: "LIGHTMODE" });
    else
      theme.dispatch({ type: "DARKMODE" });
  };

  return (
    <button className={`btn ${darkMode ? "btn-dark" : "btn-light"}`} onClick={onClick}>
      {darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
    </button>
  );
}

이제 버튼을 눌렀을 때 테마가 바뀔 것입니다.

한번 되돌아보도록 하겠습니다.

컨텍스트 API에 대해 알아봤습니다.

컨텍스트 API를 사용하는 시기를 잘 알고 있습니다.

우리는 감축기와 이를 상하문 API와 어떻게 사용하는지 이해했다.

우리는 상하문 API와 복원 프로그램을 사용하여 응용 프로그램에서 암흑 모드를 실현하는 응용 프로그램을 구축했다.

축하해, 해냈어.
읽어주셔서 감사합니다!