React 컨텍스트 제공자 패턴으로 구축

소개

이 기사에서는 React 애플리케이션을 구축할 때 React 컨텍스트 제공자를 사용하는 방법을 살펴보겠습니다. React는 컨텍스트 공급자를 사용하여 여러 구성 요소 간에 데이터나 기능을 전달할 필요 없이 React 앱의 여러 하위 구성 요소 간에 데이터를 공유하지만 많은 종속성과 이동 부분이 있는 애플리케이션을 빌드할 때 유용합니다.

React 컨텍스트 API란?

Context 책의 가스펠 또는 React Docs에 따르면 컨텍스트를 "모든 수준에서 수동으로 소품을 전달할 필요 없이 구성 요소 트리를 통해 데이터를 전달하는 방법"으로 정의합니다.

React 애플리케이션은 부모 구성 요소가 데이터를 자식 구성 요소에 길게 전달할 수 있지만 해당 데이터가 부모 구성 요소의 직계 자식이 아니라 여러 계층의 자식 구성 요소에서 사용될 때 문제가 발생합니다. 아래 다이어그램을 살펴보겠습니다.



구성 요소 A는 분명히 직계 하위 구성 요소 B, C, D가 있는 기본 상위 구성 요소입니다. 이러한 구성 요소는 구성 요소 A에서 매개 변수를 수신하고 해당 데이터를 하위 구성 요소로 전달할 수 있지만 구성 요소 F가 구성 요소 A의 데이터를 필요로 하는 시나리오는 어떻습니까? 데이터가 구성 요소 B에 필요하지 않으면 해당 데이터를 구성 요소 B로 전달하는 것이 중복됩니다. Contex 제공자는 React 애플리케이션의 모든 단일 하위 구성 요소에서 데이터를 쉽게 사용할 수 있는 멋진 방법을 제공합니다.

그것은 무엇을 위해 사용됩니까?

컨텍스트 API는 React 애플리케이션 전체에서 여러 구성 요소와 데이터를 공유하는 방법을 제공하므로 다음과 같은 애플리케이션 상태를 관리하는 방법에서 창의적일 수 있습니다.

인증: 사용자가 로그인하거나 활성 사용자 세션이 있거나 사용자 데이터를 보유하는 시기를 알 수 있음

알림: 저는 일반적으로 알림 공급자를 사용하여 내 구성 요소에 알림 경고 기능을 노출합니다.
신청.

Theming: 이것의 멋진 사용은 응용 프로그램에서 야간 모드를 제어하는 ​​것입니다here

.

응용 프로그램 시작 시 데이터 로드

React 컨텍스트 제공자 예

이것은 React 컨텍스트 제공자의 간단한 예입니다.

```import React, { Component, createContext, useContext } from "react";
export const RandomContext = createContext({ 사용자: null });

클래스 RandomProvider 확장 구성 요소 {
상태 = {
사용자: "솜토"
};

렌더() {
반품 (

{this.소품.어린이}

);
}
}

const ComponentTest = () => {
const { 사용자 } = useContext(RandomContext);
반품 (


{사용자}


);
};

기본 내보내기() => {
반품 (






);
};

The user Variable would contain the value Somto.

###Adding useState to React Context 
Combining useState with react context helps to add extra functionality to our React app, now components can interact and change the data present in the Context Provider and these changes can be seen in the entire app.

####Building an example application
For our example application, we are going to build a Simple React counter where we would be able to increase and decrease the value of a number stored in the Context, this would be done by different components by accessing the `usestate`  set Function to change the value.

####Step 1. Build and export the context provider
Let's look at the example below of our new Context Provider.



```js
import React, { Component, createContext, useContext } from "react";
const CountContext = createContext({ count: 0, setCount: () => {} });

const CountProvider = ({ children }) => {
 const [count, setCount] = React.useState(0);

 return (
   <CountContext.Provider value={{ count, setCount }}>
     <p>{count}</p>
     {children}
   </CountContext.Provider>
 );
};

export const useCountContext = () => useContext(CountContext);

export default CountProvider;

이것을 분해합시다.

 const CountContext = createContext({ count: 0, setCount: () => {} });\

코드의 이 부분은 자식 구성 요소 전체에서 사용할 수 있는 count 변수 및 setCount 함수를 포함하는 컨텍스트를 만드는 데 사용됩니다.

 const [count, setCount] = React.useState(0);

그러면 useState 변수가 시작됩니다.

 return (
   <CountContext.Provider value={{ count, setCount }}>
     <p>{count}</p>
     {children}
   </CountContext.Provider>
 );

여기서 우리는 ContextProvider를 반환하고 values ​​변수를 전달하고 children props 변수를 자신의 자식으로 전달합니다.

export const useCountContext = () => useContext(CountContext);

export default CountProvider;

UserCountContext와 컨텍스트 제공자 자체를 모두 내보냅니다.

2단계. 공급자를 사용하고 setCount를 호출합니다.

import "./styles.css";
import React, { useContext } from "react";
import ReactDOM from "react-dom";
import CountProvider, { useCountContext } from "./provider";

const Component = () => {
 const { count, setCount } = useCountContext();

 return (
   <div>
     <button
       onClick={(e) => {
         setCount(count + 1);
       }}
     >
       Add
     </button>
     <button
       onClick={(e) => {
         setCount(count - 1);
       }}
     >
       Subtract
     </button>
   </div>
 );
};

ReactDOM.render(
 <CountProvider>
   <Component></Component>
 </CountProvider>,
 document.getElementById("app")
);

결론

React 컨텍스트 공급자는 응용 프로그램 전체에서 상태를 전역적으로 유지 관리하는 방법을 제공하며 트리 계층을 통해 종속성을 전달하지 않고도 선택한 모든 구성 요소에서 해당 상태를 읽고 편집할 수 있습니다.

이 코드의 작업 예제를 사용할 수 있습니다here.

King Somto에 대해 JavaScript Works이 원래 작성함