React Context API - 구현 빠른 가이드

React Context API를 구현하는 것은 애플리케이션에서 전역 상태를 구현하는 한 가지 방법입니다.

전역 상태는 구성 요소 트리의 분리된 영역에 중첩된 동일한 상태 조각에 액세스해야 하는 자식 구성 요소가 있는 경우에 유용합니다. 이에 대한 예로는 다크 모드 레이아웃 전환 및 개인화된 애플리케이션 서식 지정을 위한 사용자 정보 액세스가 있습니다.

로컬 상태 관리 방법론에서는 공유된 상위 수준 구성 요소에서 상태를 정의하고 소품을 사용하여 하위 구성 요소 및 하위 구성 요소의 하위 구성 요소에 변수를 전달하는 prop 드릴링을 사용하여 이를 해결해야 합니다. 복잡한 구성 요소 트리를 사용하면 상태 변수를 props로 전달하는 것이 번거로울 수 있으며 하위 구성 요소가 상태를 업데이트할 때마다 전체 공유 상위 수준 구성 요소를 다시 렌더링하는 것은 비효율적일 수 있습니다. 전역 상태 관리를 위해 React Context API를 입력합니다. 이를 통해 자식 구성 요소는 '글로벌'로 만들어 구성 요소 트리를 통해 명시적으로 전달하지 않고도 상태 변수 및 상태 변수의 관련 기능에 액세스할 수 있습니다.

다른 전역 명세서 관리 솔루션은 이 문서의 범위를 벗어나지만 여기에서 다른 인기 있는 옵션에 대해 자세히 알아보세요. State Management Battle in React 2022: Hooks, Redux, and Recoil

React Context API 전역 상태 관리에 필요한 구문은 다음으로 구성됩니다.

createContext 객체

컨텍스트 공급자 구성 요소

useContext 후크

createContext 객체

createContext 객체는 React 애플리케이션에서 컨텍스트 사용을 초기화합니다.

createContext 객체를 생성하려면 React를 가져오고 React.createContext()와 동일한 상수를 설정합니다.

import React from 'react';

const GlobalContext = React.createContext();

컨텍스트 제공자 컴포넌트

컨텍스트 공급자 구성 요소는 전역 상태 및 관련 기능이 React 애플리케이션의 다른 구성 요소에 제공되는 방법입니다.

createContext 개체와 동일한 파일에서 컨텍스트 공급자 구성 요소를 만듭니다. 함수 구성 요소 구문을 가정합니다. 이 함수는 구성 요소의 자식을 소품으로 가져와 자식 소품을 포함하는 부모 구성 요소와 함께 JSX를 반환해야 합니다. 부모 구성 요소의 이름을 끝에 .Provider가 추가된 createContext 개체와 동일하게 설정하고 값 소품을 전달합니다. 값 소품은 하위 구성 요소에 전달되는 전역 상태 관련 데이터를 보유합니다.

응용 프로그램의 다른 영역에서 사용할 수 있도록 createContext 개체 및 컨텍스트 공급자 구성 요소를 내보냅니다.

import React, {useState} from 'react';

const GlobalContext = React.createContext();

function GlobalProvider({ children }) {
    const [global, setGlobal] = useState(false);

    return (
        <GlobalContext.Provider value={global}>
            {children}
        </GlobalContext.Provider>
    );
};

export default GlobalProvider;
export { GlobalContext };

응용 프로그램의 다른 구성 요소에서 전역 상태 데이터를 사용할 수 있도록 하려면 컨텍스트 공급자 구성 요소를 가져와서 전역 상태가 필요한 구성 요소 주위에 래핑합니다.

이 예제의 목적을 위해 Item은 ItemList에서 렌더링되는 구성 요소이며 전역 변수에 대한 액세스가 필요합니다.

import React from "react";
import Item from "./Item";
import GlobalProvider from '../context/global';


function ItemList() {
  return (
    <div>
      <GlobalProvider>
        <Item />
      </GlobalProvider>
    </div>
  );
};

export default ItemList;

전역 상태를 설정하기 위해 공급자 구성 요소 개체의 목표는 전역 상태 변수와 관련된 모든 setState 함수를 수용하는 것입니다. 이렇게 하면 디버깅 시간이 최소화됩니다. 특정 상태에 대한 모든 변경 사항은 하나의 파일에서 발생합니다. 코드의 다른 섹션에서 전역 상태를 분리하려면 전역 상태의 개별 섹션마다 컨텍스트 폴더와 새 파일을 만듭니다. 전역 상태와 상호 작용하는 함수를 응용 프로그램의 다른 구성 요소에 전달하려면 전역 상태 및 관련 함수를 보유하는 개체를 만들고 개체를 컨텍스트 제공자 구성 요소의 values ​​소품으로 전달합니다.

import React, { useState } from 'react';

const GlobalContext = React.createContext();

function GlobalProvider({ children }) {
  const [global, setGlobal] = useState(false);

  function handleClick() {
    setGlobal((global) => !global);
    console.log('This is an example function that interacts 
       with the global state variable global');
  };

  const value = {
    global,
    handleClick
  };

  return (
    <GlobalContext.Provider value={value}>
       {children}
    </GlobalContext.Provider>
    );
};

export default GlobalProvider;
export { GlobalContext };

useContext 후크

React의 useContext 후크는 구성 요소가 생성된 전역 상태에 액세스하는 방법입니다.

useContext 후크와 createContext 객체를 가져옵니다. 컨텍스트 제공자 컴포넌트에 전달된 값 prop을 분해하고 createContext 객체의 인수를 사용하여 useContext 후크와 동일하게 설정합니다. 이렇게 하면 구성 요소가 컨텍스트 공급자 구성 요소에 전달된 전역 상태 관련 데이터에 명시적으로 액세스할 수 있습니다.

import React, { useContext } from "react";
import { GlobalContext } from '../context/global';

function Item() {
  const { global, handleClick } = useContext(GlobalContext);  

  return (
    <div>
      {global ? <h2>the global state variable is true</h2> 
         : <h2>the global state variable is false</h2>}
      <button onClick={handleClick}>Change the value of 
         global</button>
    </div>
  );
};

export default Item;

행복한 글로벌 상태 관리!

useContext에 대한 더 많은 문서는 React Docs 문서를 확인하세요: React Docs - Context