비동기 API 호출로 React Context 설정하기

비동기 API 호출에서 React Context에 데이터 설정하기

React 프로젝트에서 백엔드 API에서 데이터를 가져와 사용자 정의 컨텍스트를 초기화해야 하는 경우, 컨텍스트가 데이터를 가져오는 API 호출이 완료되기 전에 로드되는 문제가 발생할 수 있습니다. 이 블로그 글에서는 비동기 API 호출을 통해 React Context에 데이터를 설정하는 문제에 대한 해결책을 살펴보겠습니다.

문제

기본적으로 React 컨텍스트를 생성할 때, 실제 데이터가 가져와질 때까지 사용될 초기값을 설정할 수 있습니다. 그러나 자식 컴포넌트 내에서 컨텍스트 값을 액세스하려고 하면, API 호출이 완료되기 전에는 기본값만 받을 수 있습니다.

해결책: useContext와 useEffect의 사용

이러한 문제를 해결하기 위해, React에서 제공하는 useContext와 useEffect 훅을 활용할 수 있습니다. useContext 훅은 컴포넌트 내에서 컨텍스트 값을 액세스하는 데 사용되며, useEffect 훅은 데이터를 비동기적으로 가져오는 데 사용됩니다.

다음은 비동기 API 호출을 통해 React Context에 데이터를 설정하는 예시입니다:

import React, { useState, useEffect, useContext } from "react";
import { callAffiliateApi } from "./services/affiliateService/transactionContext";

const Context = React.createContext({});
const AffiliateContext = useContext(Context);

export const AffiliateProvider = ({ children }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const newText = await callAffiliateApi();
      setData(newText);
    };
    fetchData();
  }, []);

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

위의 코드를 사용하여 useContext를 통해 커스텀 React 컨텍스트를 생성하고, 가져온 데이터를 컨텍스트 값으로 제공했습니다. 이제 자식 컴포넌트는 기본값이 아닌 실제 데이터에 액세스할 수 있습니다.

자식 컴포넌트에서 데이터에 액세스하기

자식 컴포넌트에서 데이터에 액세스하기 위해 useContext와 AffiliateContext.Consumer 컴포넌트를 사용할 수 있습니다. 다음은 이를 수행하는 예시입니다:

import { AffiliateContext } from "../../../../AffiliateContext";

class Profile extends Component {
  render() {
    return (
      <AffiliateContext.Consumer>
        {({ data }) => (
          <div>
            {data}
          </div>
        )}
      </AffiliateContext.Consumer>
    )
  }
}

export default Profile;

위의 코드 스니펫에서는 AffiliateContext.Consumer 컴포넌트를 활용하여 자식 컴포넌트 내에서 컨텍스트 값을 액세스합니다. 값 객체를 구조 분해하여 API에서 가져온 실제 데이터에 액세스할 수 있습니다.

결론

React에서 제공하는 useContext와 useEffect 훅을 사용하여 비동기적으로 API 호출을 통해 React Context에 데이터를 효율적으로 설정할 수 있습니다. 이를 통해 자식 컴포넌트가 데이터를 액세스하기 전에 데이터가 가져올 때까지 기다릴 수 있습니다. 비동기 데이터를 사용하는 컨텍스트를 다룰 때 React 프로젝트에 이러한 기술을 구현하는 것이 중요합니다.

이상입니다! 비동기 API 호출을 통해 React Context에 데이터를 설정하는 방법을 배웠습니다. 이제 동기화 문제가 발생하지 않고 React 컴포넌트가 가장 최신 데이터에 액세스할 수 있도록 할 수 있습니다.

참고 자료 : 

reactjs