[리액트] 리액트 Context API를 이용한 전역 상태관리

안녕하세요 고유입니다.

리액트 애플리케이션을 개발할 때 상태 관리는 매우 중요한 부분입니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것은 번거롭고 복잡할 수 있습니다. 이러한 문제를 해결하기 위해 리액트는 Context API를 제공합니다. 

Context API를 사용하면 전역 상태를 관리하고 컴포넌트 트리 전체에 데이터를 전달할 수 있습니다.

이번 포스팅에서는 리액트 Context API를 활용하여 전역 상태를 관리하는 방법에 대해 알아보겠습니다. 우선 Context API의 기본 개념부터 살펴보고, 예시 코드를 통해 실제로 어떻게 사용하는지 살펴보겠습니다.

Context API 개요
Context API는 리액트의 공식 API로, 전역 상태를 관리하는 역할을 합니다. Context는 프로바이더(Provider)와 컨슈머(Consumer)라는 두 가지 주요 컴포넌트로 구성됩니다. 프로바이더는 전역 상태를 설정하고, 컨슈머는 전역 상태를 사용하는 컴포넌트입니다. 이를 통해 데이터를 전달하고 업데이트할 수 있습니다.

Context 생성하기
먼저, Context를 생성해야 합니다. createContext 함수를 사용하여 Context 객체를 생성할 수 있습니다.

 

// MyContext.js
import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

위 예시 코드에서는 createContext 함수를 사용하여 MyContext라는 이름의 Context 객체를 생성하였습니다. 이제 이 Context를 활용하여 전역 상태를 관리할 수 있습니다.

프로바이더 컴포넌트 생성하기
이어서, 전역 상태를 설정하고 전달하기 위한 프로바이더 컴포넌트를 생성합니다. 프로바이더 컴포넌트는 Context.Provider를 사용하여 전역 상태를 설정하고 하위 컴포넌트에 전달합니다.

 

// MyProvider.js
import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [state, setState] = useState('');

  const updateState = (newState) => {
    setState(newState);
  };

  return (
    <MyContext.Provider value={{ state, updateState }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

위 예시 코드에서는 MyProvider라는 이름의 프로바이더 컴포넌트를 생성하였습니다. 이 컴포넌트는 state라는 상태와 updateState라는 상태 업데이트 함수를 가지고 있습니다. 이 상태와 함수를 MyContext.Provider의 value 속성에 전달하여 하위 컴포넌트에서 사용할 수 있도록 합니다.

컨슈머 컴포넌트 사용하기
이제 프로바이더 컴포넌트를 사용하여 전역 상태를 컨슈머 컴포넌트에서 접근하고 업데이트해 보겠습니다.

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

const MyComponent = () => {
  const { state, updateState } = useContext(MyContext);

  const handleClick = () => {
    updateState('New State');
  };

  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={handleClick}>Update State</button>
    </div>
  );
};

export default MyComponent;

위 예시 코드에서는 MyComponent라는 이름의 컴포넌트를 생성하였습니다. useContext 훅을 사용하여 MyContext에서 state와 updateState를 가져옵니다. 이를 통해 현재 상태를 표시하고 버튼 클릭 시 상태를 업데이트할 수 있습니다.

사용 예시
이제 위에서 생성한 MyProvider와 MyComponent를 사용하여 전역 상태를 관리하는 예시를 살펴보겠습니다

// App.js
import React from 'react';
import MyProvider from './MyProvider';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

위 예시 코드에서는 App 컴포넌트 내부에서 MyProvider로 감싸고 MyComponent를 렌더링 하였습니다. 이를 통해 MyComponent에서 전역 상태를 사용하고 업데이트할 수 있습니다.

이렇게 리액트 Context API를 활용하면 간편하게 전역 상태를 관리할 수 있습니다. 컨텍스트를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 번거로움을 해결할 수 있으며, 컴포넌트 트리 전체에서 일관된 상태 관리를 할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

감사합니다.