React에서 useContext로 전역 상태 관리하기

 

React 애플리케이션을 개발할 때, 여러 컴포넌트 간에 데이터를 공유하고 관리하는 것은 필수적인 작업입니다. 특히, 상태가 여러 컴포넌트에서 공통으로 사용되어야 할 경우, 상태 관리가 복잡해질 수 있습니다. 이를 해결하기 위한 방법으로 Context API와 useContext 훅이 제공됩니다. 이 글에서는 useContext를 사용하여 React에서 전역 상태를 관리하는 방법에 대해 알아보겠습니다.

1. Context API와 useContext 훅

React의 Context API는 컴포넌트 트리 내에서 데이터를 전역적으로 공유할 수 있게 해주는 기능입니다. Context는 특정 데이터를 전역적으로 관리할 수 있게 해주어, 중간 단계의 컴포넌트들에 props를 일일이 전달할 필요 없이 데이터를 공유할 수 있습니다.

useContext 훅은 이러한 Context를 함수형 컴포넌트에서 사용할 수 있도록 도와주는 훅입니다. useContext는 특정 Context 객체를 인자로 받아, 그 Context에 저장된 값을 반환합니다. 이 값을 반환받은 컴포넌트는 해당 Context의 변경사항을 구독하며, Context가 업데이트되면 컴포넌트도 자동으로 리렌더링됩니다.

2. useContext를 사용한 전역 상태 관리의 흐름

2.1. Context 만들기

전역 상태를 관리하기 위해서는 먼저 React.createContext를 사용하여 Context 객체를 생성해야 합니다. 이 객체는 기본값을 가질 수 있으며, 이 값은 Context를 구독하는 컴포넌트들에 의해 사용됩니다.

import React, { createContext, useState, useContext } from 'react';

// 1. Context 생성
const MyContext = createContext();

// 2. Context를 제공하는 컴포넌트 만들기
const MyProvider = ({ children }) => {
  const [state, setState] = useState(0);

  // 상태 값을 변경하는 함수
  const increment = () => setState(state + 1);

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

여기에서 MyContext는 createContext를 통해 만들어진 Context 객체입니다. 그리고 MyProvider 컴포넌트는 MyContext.Provider를 사용하여 자식 컴포넌트들에 전역 상태를 전달합니다. value prop으로 상태(state)와 상태를 변경하는 함수(increment)를 제공하므로, MyContext를 구독하는 컴포넌트들은 이 값을 참조할 수 있습니다.

2.2. useContext로 값 가져오기

useContext 훅을 사용하여 MyContext에서 제공하는 값을 소비할 수 있습니다. 이 훅은 MyContext 객체를 인자로 받아, 그 Context의 현재 값을 반환합니다.

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

  return (
    <div>
      <p>현재 상태: {state}</p>
      <button onClick={increment}>상태 증가</button>
    </div>
  );
};

useContext(MyContext)를 호출하면, MyContext에서 제공하는 값 (state와 increment)을 사용할 수 있습니다. 이 컴포넌트는 MyProvider에서 제공한 전역 상태를 자동으로 구독하며, 상태가 업데이트되면 자동으로 리렌더링됩니다.

2.3. MyProvider로 컴포넌트 감싸기

이제 전역 상태를 제공할 MyProvider로 애플리케이션의 컴포넌트를 감싸면, 모든 하위 컴포넌트에서 useContext를 통해 전역 상태에 접근할 수 있게 됩니다.

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

이렇게 하면, MyProvider가 모든 하위 컴포넌트에 MyContext를 제공하며, 각 컴포넌트는 useContext를 통해 그 값을 사용할 수 있습니다.

3. useContext로 전역 상태 관리의 장점

3.1. 전역 상태를 간편하게 관리

useContext는 React의 전역 상태 관리를 매우 간편하게 만들어줍니다. 중간 단계의 컴포넌트들이나 props drilling 없이도 상태를 필요로 하는 컴포넌트에서 바로 useContext를 사용하여 값을 참조할 수 있습니다. 이 방식은 작은 프로젝트에서 전역 상태를 간단하게 관리할 수 있도록 도와줍니다.

3.2. 리렌더링 최적화

useContext는 컴포넌트가 Context의 값을 구독하고 있을 때, Context의 값이 변경되면 자동으로 해당 컴포넌트를 리렌더링합니다. 이를 통해 전역 상태의 변경을 즉시 반영할 수 있습니다.

3.3. 컴포넌트 간의 의존성 감소

컴포넌트 간에 상태를 전달할 때 props를 사용하는 대신, useContext를 사용하여 전역 상태를 직접 참조할 수 있습니다. 이렇게 하면 각 컴포넌트는 props를 전달하는데 의존하지 않게 되며, 컴포넌트 간의 의존성을 줄일 수 있습니다.

3.4. 전역 상태와 함수의 결합

전역 상태와 이를 업데이트하는 함수를 useContext를 통해 쉽게 결합할 수 있습니다. 예를 들어, 상태를 갱신하는 함수 (increment)와 상태 자체 (state)를 하나의 Context에 포함시켜서, 모든 하위 컴포넌트가 이를 공유하도록 할 수 있습니다.

4. useContext와 다른 상태 관리 라이브러리 비교

useContext는 작은 애플리케이션에서 전역 상태를 관리하는 데 매우 유용하지만, 큰 규모의 애플리케이션에서는 Redux, MobX, Recoil과 같은 상태 관리 라이브러리를 사용하는 것이 더 효율적일 수 있습니다. 이러한 라이브러리들은 상태 관리의 복잡성을 줄이고, 애플리케이션의 성능 최적화 및 디버깅을 쉽게 만들어줍니다.

4.1. Redux와 useContext

Redux는 전역 상태를 관리하는 매우 강력한 라이브러리입니다. useContext는 상대적으로 간단한 전역 상태 관리를 위한 방법이며, Redux는 보다 복잡하고 규모가 큰 애플리케이션에 적합합니다. Redux는 미들웨어, 디버깅 도구, 액션 등을 제공하여 더 정교한 상태 관리가 가능합니다.

4.2. Recoil과 useContext

Recoil은 React에 최적화된 상태 관리 라이브러리로, useContext와 비슷하지만 더 세밀한 상태 관리를 지원합니다. 상태의 의존성 그래프를 만들 수 있으며, 비동기 상태 관리에도 강력한 기능을 제공합니다. useContext보다 더 복잡한 상태 관리가 필요하다면 Recoil을 고려할 수 있습니다.

5. 결론

useContext는 React에서 전역 상태를 관리하는 매우 간단하고 강력한 방법입니다. 작은 규모의 애플리케이션이나 간단한 상태 관리가 필요한 경우, useContext와 Context API를 사용하여 상태를 전역으로 관리하는 것이 훌륭한 선택입니다. 특히, 복잡한 상태 관리 라이브러리를 도입할 필요가 없는 경우 useContext를 사용하면 코드가 간결해지고, 유지보수 또한 쉬워집니다.

하지만 애플리케이션의 규모가 커지고 상태 관리가 복잡해지면, Redux나 Recoil과 같은 라이브러리를 사용하여 더 강력한 상태 관리 기능을 활용하는 것이 좋습니다. 각 상황에 맞는 도구를 선택하는 것이 중요한 만큼, useContext는 그 자체로도 매우 유용한 상태 관리 도구입니다.