React 상태 관리 "Context API"

Context API를 사용하는 이유와 적합한 상황, 그리고 대안

React로 애플리케이션을 개발하다 보면 컴포넌트 간 상태를 공유해야 하는 상황이 자주 발생합니다. 이러한 경우, React의 Context API는 props 드릴링을 피하고 전역 상태를 간단하게 관리할 수 있는 방법을 제공합니다. 이번 포스트에서는 Context API를 사용하는 이유, 적합한 상황, 한계점, 그리고 다른 대안을 함께 알아보겠습니다.

Context API를 사용하는 이유

1. 깊은 트리 구조의 props 전달 문제 해결

여러 레벨을 거쳐야 하는 props 드릴링을 피할 수 있습니다. 부모 컴포넌트에서 설정한 상태를 하위 컴포넌트들에 직접 전달하여 복잡한 props 전달 과정을 줄일 수 있습니다.

2. 글로벌 상태 관리의 간단한 대안

Context API는 로그인 정보, 사용자 설정, 테마와 같이 전역적으로 공유되어야 하는 상태를 관리할 때 유용합니다. 외부 라이브러리 없이 React만으로 전역 상태를 관리할 수 있는 장점이 있습니다.

3. 코드 간소화

props를 전달하는 과정을 생략하여 코드가 단순해지고 유지보수하기 쉬워집니다. 컴포넌트 간에 상태를 공유하는 작업이 많아질수록 이점이 커집니다.

Context API가 적합한 상황

• 전역 상태가 많지 않은 경우: 전역으로 관리할 상태의 양이 적고, 변경 빈도가 낮은 경우 적합합니다.
• 복잡한 상태 관리가 필요하지 않은 경우: Redux 같은 외부 상태 관리 라이브러리가 필요할 정도로 복잡하지 않다면 Context API로 충분히 관리할 수 있습니다.
• 적은 수의 데이터 업데이트: Context는 상태 업데이트 시 전체 하위 컴포넌트를 리렌더링하므로 데이터 업데이트가 잦거나 구독 컴포넌트가 많은 경우 성능에 영향을 줄 수 있습니다.

Context API 사용 예제

아래 예제는 Theme를 전역적으로 관리하고, 이를 여러 컴포넌트에서 쉽게 접근하는 예제입니다.

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

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

// 2. Provider 컴포넌트 정의
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. useContext로 쉽게 Theme 접근
const ThemeButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      현재 테마: {theme}
    </button>
  );
};

// 4. 전체 애플리케이션에서 사용
const App = () => (
  <ThemeProvider>
    <div>
      <h1>React Context API 예제</h1>
      <ThemeButton />
    </div>
  </ThemeProvider>
);

export default App;

 

Context API의 한계와 대안

1. 성능 문제
   Context가 업데이트되면 이를 사용하는 모든 하위 컴포넌트가 다시 렌더링됩니다. 상태가 자주 변경되고 해당 상태에 의존하는 컴포넌트가 많다면 Context API는 성능에 문제가 생길 수 있습니다.
2. 대안
   Redux: 상태가 복잡하고 최적화가 필요한 경우 Redux를 사용하면 좋습니다. 미들웨어와 구조화된 패턴이 있어 복잡한 상태 관리에 유리합니다.
   Zustand: 상태를 모듈화하여 관리할 수 있으며, Context API의 장점과 Redux의 일부 장점을 결합하여 직관적이고 간단한 전역 상태 관리에 적합합니다.
   Recoil, Jotai: 컴포넌트가 독립적으로 상태를 구독하도록 설계되어, Context API의 리렌더링 문제를 보완하면서도 간단한 전역 상태 관리를 제공합니다.

 

결론

Context API는 전역 상태 관리가 간단한 경우에 유용한 도구입니다. 하지만 데이터 업데이트가 빈번하거나 상태가 복잡하다면 Redux, Zustand, Recoil 같은 대안을 고려하는 것이 좋습니다.