React 컨텍스트 시작

본고에서, 나는 당신에게 React 상하문과 응용 프로그램에서 그것을 사용하는 가장 좋은 방법에 대한 몇 가지 기교를 소개할 것입니다.
React 파일에서 볼 수 있습니다.

React Context provides a way to pass data through the component tree without having to pass props down manually at every level.

가장 기본적인 기초부터 시작하겠습니다. 상하문 API의 주요 목적은 구성 요소 간에 틈새 없이 데이터를 전달하는 것입니다. 데이터를 추출하거나 루트를 통해 전달하거나 응용 프로그램에서redux를 사용할 필요가 없습니다. 그 작업 원리는 거의 비슷하지만 사용하기에는 좀 복잡합니다.
클라이언트 응용 프로그램의 경험이 있다면, 정확하게 실행되지 않으면 구성 요소 내에서 데이터를 전달하는 것이 복잡해지기 쉽다는 것을 증명할 수 있습니다.
지금 이곳이 바로 우리가 React 상하문을 소개하는 곳이다.예를 들어 만약에 우리가 응용 프로그램의 배경을 어두운 모드에서 밝은 모드로 바꾸려고 한다면 반대로 이것은 좋은 장면으로 응용 프로그램에서 React 상하문을 사용하는 장점을 볼 수 있다.
Create React 앱을 사용하여 React 응용 프로그램을 구축하는 것부터 시작합니다.이를 위해, 우리는 편집기를 열고 명령행 인터페이스에 들어가 다음 코드를 연속적으로 실행할 것이다.

npx create-react-app theme-app
cd theme-app
npm start

응용 프로그램에서 상하문을 사용하려면 상하문과 데이터가 저장된 위치를 정의하는 것부터 시작해야 한다.이것은 우리의 응용 프로그램의 데이터 흐름에 방향을 제공하기 때문에 매우 관건적이다.
React 응용 프로그램을 구성할 수 있는 몇 가지 방법이 있지만, 응용 프로그램의 모든 상하문을 저장할 수 있는 단독 폴더가 있는 것이 가장 좋다. 이렇게 하면 문제를 더욱 쉽고 빠르게 디버깅할 수 있지만, 결국은 코드를 어떻게 구성하느냐에 달려 있다. 이 응용 프로그램에 대해 나는 이렇게 구성할 것이다.
우리는 다음과 같은 측면에서 시작한다.
응용 프로그램 소스 폴더에 컨텍스트 폴더를 만듭니다.
다음은 컨텍스트 폴더에 테마 폴더를 만듭니다.
ThemeContext도 만들었습니다.테마 폴더의 js 파일

또한 이 코드를 ThemeContext에 추가합니다.회사 명

import React from "react";

const ThemeContext = React.createContext({});
export default ThemeContext;

우리는 이미 응용 프로그램을 위해 주제 상하문을 성공적으로 만들었다.
다음에 우리는 응용 프로그램의 어느 곳에서든 상하문에 있는 데이터에 접근할 수 있어야 한다. 이 점을 하려면 상하문 제공자와 상하문 소비자가 필요하다. 나는 이것이 이상하게 들리지 않기를 바란다. 그러나 만약 그렇다면 걱정하지 마라. 우리는 곧 그것을 찾을 것이다.
상하문의 작업 원리는 사용자와 공급자 구성 요소를 첨부하는 것이다. 공급자 구성 요소는 응용 프로그램 범위 내에서 응용 프로그램 상하문의 데이터에 접근할 수 있도록 한다.
현재, 우리는 우리의 응용 프로그램 구성 요소에 대해 약간의 업데이트를 진행할 것이다.

import React,{useState} from 'react';
import logo from './logo.svg';
import Header from './components/header/Header';
import './App.css';
import ThemeContext from './context/theme/ThemeContext';
function App() {

  const [theme,changeTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{theme,changeTheme}}>
    <div className={`App ${theme}`}>
      <Header logo={logo}  className="App-header">
        <p>
          Edit <code>src/App.js</code>!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </Header>
    </div>
    </ThemeContext.Provider>
  );
}

export default App;

"light"라는 클래스를 저장하기 위해useState 갈고리를 사용하는 방법을 주의하십시오.제목에 있는 단추를 눌렀을 때, 우리는 값을 밝기에서 어두움으로 전환합니다. 따라서useState 갈고리의 되돌아오는 값을 사용합니다. useState 갈고리는'주제'라는 상태와change Theme 이라는 상태를 수정하는 함수를 포함하는 수조입니다. 그리고 이 값은 프로그램의 다른 부분에서 필요한 값이기 때문에 공급자에게 전달합니다.
로고, 클래스 도구, 다른 하위 구성 요소 등 몇 가지 도구를 포함하고 있는 제목 구성 요소를 살펴보겠습니다. 그러나 현재로서는 React Context의 기능을 테스트하고 싶어서 다른 도구를 전달하지 않습니다.
다음은 헤더 구성 요소에서 이를 실현하는 방법입니다.

import React,{useContext} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
const Header = ({logo,children}) => {

const {theme,changeTheme} = useContext(ThemeContext);

return(
  <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
        {children}
  </header>);
};

export default Header;

상기 코드를 토대로 우리는other에서 상하문의 값을 분해하여 필요에 따라 헤드 구성 요소에서 이 값을 사용하도록 했다.우리는 버튼을 누를 때마다 상태 값을 전환하기 위해 삼원 연산자를 사용합니다.
또한 React 상하문에서 데이터를 읽을 수 있도록 하는 소비자 구성 요소를 살펴보겠습니다.
소비자 구성 요소는 React 클래스 구성 요소와 함께 사용하면 효과가 가장 좋지만, React는 우리에게 같은 기능을 수행하는usectext와 연결을 제공합니다.클래스 구성 요소를 사용하는 것을 좋아한다면, 우리는 헤드 구성 요소에서 소비자를 실현할 것입니다. 아래와 같습니다.

import React,{Component} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
class Header extends Component {
  render(){
  const {logo,children}=this.props;
  return(
    <ThemeContext.Consumer>
        {
          ({theme,changeTheme})=>{
            return (
              <header className="App-header">
                      <img src={logo} className="App-logo" alt="logo" />
                      <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
                      {children}
              </header>
            )
          }
        }
    </ThemeContext.Consumer>);
  }
};

export default Header;

코드에서 알 수 있듯이 우리는 머리의 다른 하위 구성 요소를 사용하여 사용자를 나타내고 있지만 사용자는 함수를 하위 함수로 하고 공급자의 값을 함수에 주입하면 다른 하위 구성 요소의 값을 사용할 수 있다.
다른 한편,react의useContext 갈고리를 사용하여 상하문을 사용하는 더욱 간단한 방법을 봅시다.

import React,{useContext} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
const Header = ({logo,children}) => {
const {theme,changeTheme} = useContext(ThemeContext);
return(
  <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
        {children}
  </header>);
};

export default Header;

한 마디로 하면, 이것은 단지 간단한 개술일 뿐, 응용 프로그램에서 React 상하문을 어떻게 사용하는지 소개한다.
더 많은 정보를 얻으려면 이곳에서 원본 코드를 얻을 수 있습니다.