반응 컨텍스트 사용 방법

당신은 일찍이 3급에서 4급의 상태와 상태를 갱신하는 방법을 통과해야 했습니까?그렇다면 묵묵히 참거나 레드ux 같은 라이브러리를 봤을지도 몰라요.React 배후의 팀은 지역 사회의 이런 고소를 듣고 이 문제를 위한 기존의 해결 방안을 만들 때가 됐다고 결정했다.그들의 해결 방안은'상하문'이라고 불리는 React 라이브러리의 일부분이다.본고에서 당신은 프로젝트에서 상하문을 어떻게 설정하고 사용하는지 배울 것입니다.

언어 환경 이전의 생활

언어 환경에 들어가기 전에, 나는 언어 환경이 어떤 새로운 반응자에게 해결되는 문제를 설명하고 싶다.전역 상태 관리 이전의 "Ye Olden Times"에서는 각기 다른 위치에서 사용되는 상태에 대해 최상위 계층의 구성 요소에 상태를 유지한 다음 아래로 전달하거나 각 구성 요소에 동일한 코드를 작성하여 각 필수 상태의 구성 요소의 상태를 관리하는 두 가지 옵션이 있습니다.
그 다음 해결 방안은 중복된 코드를 여기저기 써야 한다는 것을 의미하기 때문에 좋지 않다.이것은 고통이다. (위험할 수도 있다.) 만약 당신이 다음 과정에서 논리를 갱신해야 한다면, 코드가 중복되는 부분을 놓치고 논리에 차이가 생길 수 있기 때문이다.우리는 이런 상황을 피하기를 바란다.

여러 자녀와 손주를 포함하는 복잡한 프로그램을 만들기 전에 첫 번째 옵션은 그다지 나쁘지 않습니다.그리고 증손이 맨 윗부분 구성 요소의 상태(또는 상태를 바꾸는 능력)를 필요로 한다면 다른 단계가 그것을 사용하지 않아도 모든 단계를 통해 전달해야 한다.이 점을 설명하기 위해서 나는 예를 하나 들 것이다.

const React, { useState } from 'react';

const IncreaseButton = ({count, setCount}) => {
    return (
        <button
            onClick={() => setCount(count + 1)}
        >
            Increase value to {count + 1}
        </button>
    )
}

const DecreaseButton = ({count, setCount}) => {
    return (
        <button
            onClick={() => setCount(count - 1)}
        >
            Decrease value to {count - 1}
        </button>
    )
}

const Clicker = ({count, setCount}) => {
    return (
        <div>
            <IncreaseButton count={count} setCount={setCount}/>
            <DecreaseButton count={count} setCount={setCount}/>
        </div>
    )
}

const App = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <Clicker count={count} setCount={setCount} />
        </div>
    );
}

위의 완전히 실제와 부합되지 않는 예에서, 당신은 내가 상태가 있다는 것을 볼 수 있습니다. 이것은 Clicker라는 단추 용기에 전달되고, 이 용기는 count와 setCount 변수를 사용하여 두 단추의 논리를 나타냅니다.Clicker 와 count 데이터에 대해 아무런 처리도 하지 않았지만, 구성 요소로 전달해야 합니다.
이것은 특별히 현실적인 예는 아니지만 전역 상태 관리 도구를 사용하기 전에 이런 일은 이미 매우 보편적인 방법이 되었다.그렇기 때문에 레드ux와 같은 도구가 유행하고 있다. 비록 대부분의 경우, 이것은 과오를 바로잡는 것일 수도 있다.그래서 페이스북 엔지니어들은 가능한 한 적은 복잡성으로 전 세계 상태 문제를 해결하는 우아한 해결 방안을 생각해냈고 이를 상하문이라고 부른다.

컨텍스트 작성 방법

컨텍스트를 작성하는 것은 매우 간단합니다.방법을 가져와 변수에 분배하기만 하면 됩니다.이렇게 너는 끝장이야!

import {createContext} from 'react';

const MyContext = createContext();

TypeScript를 사용한다면, React가 무슨 일이 일어날지 알 수 있도록 상하문에 유형을 설정해야 합니다.

import {createContext} from 'react';

interface IMyContext {
    ...
}

const MyContext = createContext<IMyContext>();

축하합니다!당신은 이미 첫 번째 상하문을 만들었습니다!

무엇이 상하문 공급자입니까?

잘 물었어!컨텍스트 공급자는 컨텍스트를 제공합니다.
그래, 그래.그것은 매우 상투적인 우스갯소리다.그러나 실제로 그들은 이 작품을 위해 더 좋은 이름을 선택했다.컨텍스트 제공 프로그램은 컨텍스트가 필요한 모든 컨텍스트를 캡슐화하여 해당 컨텍스트의 컨텍스트를 제공합니다.
내가 가장 좋아하는 방법 중 하나는 그것을 구성 요소로 상하문 자체와 같은 파일에 포함시키는 것이다. 이렇게 하면 어디에서 그것을 찾을 수 있는지 쉽게 알 수 있다.

// MyContext.jsx
import React, {createContext, useState} from 'react';

export const MyContext = createContext({
    count: 0,
    setCount: () => {},
});

export const MyContextProvider = ({children}) => {
    const [count, setCount] = useState(0);

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

비록 내가 이렇게 했지만, 너도 공급자를 네가 원하는 곳에 쉽게 놓을 수 있다.프로그램에 유일하게 필요한 도구는 setCount 입니다. 상하문에서 하나의 데이터만 사용한다면, 모든 종류의 데이터가 될 수 있습니다.컨텍스트의 여러 항목에 대해 컨텍스트의 컨텐트와 일치하는 객체로 전달해야 합니다.예를 들어 위의 예시에서 value 대상은count와setCount 키가 필요합니다.프로그램의 MyContext 에는 같은 count과 set Count 키를 설정한 대상이 있습니다.

컨텍스트 공급자 사용

프로젝트에서 상하문을 사용하는 다음 단계는 모든 구성 요소 (하위 구성 요소) 를 공급자에게 포장하는 것입니다.아래의 예에서, 나는 모든 구성 요소가 나의 상하문에 접근할 수 있을 것이라고 가정하기 때문에, 나는 그것을 value (맨 위의) 파일에 놓을 것이다.

import React from 'react';
import { MyContextProvider } from './MyContext';

const App = ({ children }) => {
    return (
        <MyContextProvider>
            {children}
        </MyContextProvider>
    );
}

현재 공급자는 응용 프로그램의 모든 다른 내용을 포장하여 응용 프로그램의 모든 내용을 상하문으로 알고 있다.너는 이미 너의 위아래 문장을 사용할 준비가 되어 있다.

컨텍스트는 어떻게 사용합니까?

따라서 위아래 문장을 만들었고 제공 프로그램에서 구성 요소를 만들었습니다.이제 어떡하지?현재, 상하문에서 데이터를 얻을 수 있으며, 필요할 때 사용할 수 있습니다.몇 가지 다른 방법이 이 점을 해낼 수 있기 때문에 나는 너희들에게 이 두 가지 방법을 보여줄 것이다.

소비자 사용

첫 번째 방법은 소비자를 사용하는 것이다.이것은 상하문으로 만든 것입니다. 상하문을 사용하고자 하는 구성 요소를 포장해야 합니다. 이것은 상하문 변수에 접근할 수 있도록 합니다.이 방법만 클래스 구성 요소 내부에서 작업을 할 수 있습니다.다음 코드는 내가 앞에서 설정한 상하문과 어떻게 함께 작업을 할 것인지를 보여 줍니다.

import React from 'react';
import { MyContext } from './MyContext';

const MyComponentWithContext = () => {
    return (
        <MyContext.Consumer>
            {(context) => (
                <p>The current count is {context.count}</p>
            )}
        </MyContext.Consumer>
    );
}

만약 네가 원한다면, 너도 소비자 내부에서 해체를 사용하여 네가 진정으로 원하는 것만 얻을 수 있다.아래에 강조 표시된 코드는 이렇게 하면 서로 다른 코드가 있을 수 있음을 보여 줍니다.

import React from 'react';
import { MyContext } from './MyContext';

const MyComponentWithContext = () => {
    return (
        <MyContext.Consumer>
            {({count}) => ( <p>The current count is {count}</p> )} </MyContext.Consumer>
    );
}

useContext 갈고리

지난 게시물에서 나는 many of the different hooks that are available in React에 대해 이야기했다.그것들은 이미 더욱 흔히 볼 수 있는 업무 방식이 되었다. 왜냐하면 모든 것을 쓸 수 있기 때문이다. 대부분의 일은 기능 구성 요소로 되어 있기 때문이다.App.jsx 갈고리를 사용할 때, 당신은 여전히 자신이 공급자 내부에 있다는 것을 확보해야 하지만, 당신은 더 이상 소비자와 한패가 될 필요가 없습니다.소비자와 마찬가지로, 당신은 useContext 갈고리의 해체를 사용하여 필요한 변수만 얻을 수 있습니다.만약 내가 위에서 구성 요소를 재구성해서 useContext 갈고리를 사용한다면, 그것은 이렇게 보일 것이다.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const MyComponentWithContext = () => {
    const {count} = useContext(MyContext);

    return (
        <p>The current count is {context.count}</p>
    );
}

이 갈고리를 사용하려면 React에서 가져오고, 데이터를 가져오는 특정한 상하문을 가져오며, 상하문에서 어떤 데이터를 가져와야 하는지 알려야 합니다.내가 보기에 이 해결 방안은 보기에 더욱 깨끗하고 읽기 쉽지만 기능 구성 요소를 사용할 때 이것은 완전히 개인의 선호이다.

제가 상하문이 여러 개 있다면요?

만약 네가 위아래 문장만 필요로 하는 것이 아니라면, 이것은 문제가 아니다.네가 마시고 싶은 만큼 마셔라.공급자를 데이터가 필요한 구성 요소 주위에 포장하기만 하면 됩니다.컨텍스트가 여러 개인 경우 다음 예와 유사할 수 있습니다.

import React from 'react';
import { MyFirstContextProvider } from './MyFirstContext';
import { MySecondContextProvider } from './MySecondContext';
import { MyThirdContextProvider } from './MyThirdContext';

const App = ({ children }) => {
    return (
        <MyFirstContextProvider>
            <MySecondContextProvider>
                <MyThirdContextProvider>
                    {children}
                </MyThirdContextProvider>
            </MySecondContextProvider>
        </MyFirstContextProvider>
    );
}

만일 전체 프로그램을 공급자에 포장했다면, 현재 모든 구성 요소에서 공급자의 상하문을 사용할 수 있습니다.유일하게 주의해야 할 또 다른 일은 소비자나 갈고리를 사용할 때 어떤 상하문을 가져와야 하는가이다.useContext에서 데이터를 얻으려면 소비자나 호출MySecondContext 갈고리를 만들 때 특정한 상하문을 확보하고 사용해야 한다.

결론

전체 응용 프로그램에서 동일한 데이터를 재사용해야 하는 경우 React Context는 게임 규칙을 변경합니다.그것은 추가 라이브러리나 대량의 복잡성을 증가시키지 않고 대량의 유연성을 증가시켰다.당신의 다음 프로젝트에서 시도해 보세요. 당신의 생각을 알게 해 주세요.
너는 트위터에서 나를 찾을 수 있다.