React Context API 및 useReducer , 파트 1

오늘 우리는 React Context API를 사용하여 애플리케이션 전체에서 값을 공유하는 방법과 useReducer 후크를 사용하여 프로젝트 내에서 상태를 관리하는 방법을 배웁니다.

이 게시물의 목적을 위해 전자 상거래 프로젝트를 예로 사용하겠습니다. React의 컨텍스트 API와 useReducer를 사용하여 애플리케이션 전체에서 상태를 공유하고 애플리케이션 전체에서 해당 상태를 수정할 수 있습니다.

React Context API부터 시작하겠습니다.
우선 컨텍스트를 생성하고 변수 ProductContext에 할당합니다. 이렇게 하면 컨텍스트 객체가 생성되고 모든 컨텍스트 객체에는 소비하는 구성 요소가 컨텍스트 변경 사항을 구독할 수 있도록 하는 Provider React 구성 요소가 함께 제공됩니다.

//product_context.js

const ProductContext = React.createContext()

그러나 "소비 구성 요소"란 정확히 무엇입니까? 구성 요소를 소비하는 것은 컨텍스트 개체에서 Provider React 구성 요소 내에 래핑된 구성 요소입니다. 이 경우 이 공급자를 반환하는 자체 React 구성 요소를 만듭니다.

//product_context.js

const ProductContext = React.createContext()

export const ProductsProvider = ({ children }) => {
  return (
    <ProductContext.Provider value={}>
      {children}
    </ProductContext.Provider>
  );
};

ProductsProvider 구성 요소의 하위 구성 요소는 컨텍스트의 소비 구성 요소가 되며 컨텍스트가 제공하는 값에 액세스할 수 있습니다.

따라서 이러한 "컨텍스트가 제공하는 값"은 무엇입니까? 컨텍스트가 제공하기를 원하는 기능이나 변수를 제공하는 것은 우리에게 달려 있습니다. 우리의 경우 아래와 같이 fetchProducts 함수를 전달하려고 합니다.

//product_context.js

export const ProductsProvider = ({ children }) => {

  const fetchProducts = async () => {
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
    } catch (error) {
      console.log({ error });
    }
  };

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

내 ProductsProvider 구성 요소 내에서 API에서 데이터를 가져오는 것이 목적인 fetchProducts라는 함수를 만들었습니다. 그런 다음 해당 함수를 ProductContext.Provider의 값 소품으로 전달합니다. 따라서 이 fetchProducts 값은 ProductContext.Provider의 모든 하위에서 사용할 수 있습니다.

공급자에서 이러한 값에 액세스하는 마지막 단계는 useContext 후크를 사용하여 ProductContext.Provider의 값에 대한 액세스 권한을 부여하는 것입니다.

//product_context.js

export const ProductsProvider = ({ children }) => {

  const fetchProducts = async () => {
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
    } catch (error) {
      console.log({ error });
    }
  };

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

export const useProductContext = () => {
  return useContext(ProductContext);
};

ProductContext.Provider에서 값을 반환하는 useProductContext라는 사용자 지정 후크를 만듭니다.
이와 같이 컨텍스트 공급자의 값을 사용하려는 경우 아래와 같이 사용자 지정 후크의 값을 분해하기만 하면 됩니다.

//Product.js Page

import { useProductContext } from "../products_context";

const { featuredProducts } = useProductContext();

구성 요소가 ProductsProvider 함수의 자식 구성 요소인 한 구성 요소는 이러한 값에 액세스할 수 있습니다.

예제를 보여주기 위해 내 프로젝트에 Nextjs를 사용하고 있고 Nextjs를 사용하고 있습니다. 아래는 내 전체 애플리케이션이 컨텍스트 값을 받을 수 있도록 내 ProductsProvider 구성 요소를 연결하는 방법의 예입니다.

//_app.js
import { ProductsProvider } from "../products_context";

function MyApp({ Component, pageProps }) {
  return (
      <ProductsProvider>
        <Component {...pageProps} />
      </ProductsProvider>
  );
}

export default MyApp;

NextJS에서 태그는 내 애플리케이션의 모든 페이지가 내 컨텍스트 값에 액세스할 수 있으므로 표시되는 현재 페이지입니다.

이것이 React Context API를 사용하는 흐름에 대한 명확한 그림을 제공하기를 바랍니다. 2부에서는 데이터 상태를 관리하기 위해 useReducer를 추가하고 해당 상태 값을 모든 구성 요소와 공유하는 방법을 살펴보겠습니다.