Builder.shin

React Context API로 Redux 없이 전역 상태 관리하기

배경

신규 어드민 대시보드 프로젝트를 진행하면서 상태 관리 라이브러리 선택을 고민했다. 페이지가 5개 정도로 작고, 공유할 상태도 사용자 정보와 테마 설정 정도였다. Redux를 도입하기엔 보일러플레이트가 과하다고 판단해 Context API를 사용하기로 했다.

구현

// contexts/AppContext.js
import React, { Component, createContext } from 'react';

const AppContext = createContext();

class AppProvider extends Component {
  state = {
    user: null,
    theme: 'light'
  };

  setUser = (user) => {
    this.setState({ user });
  };

  toggleTheme = () => {
    this.setState(prev => ({
      theme: prev.theme === 'light' ? 'dark' : 'light'
    }));
  };

  render() {
    return (
      <AppContext.Provider
        value={{
          ...this.state,
          setUser: this.setUser,
          toggleTheme: this.toggleTheme
        }}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

export { AppContext, AppProvider };

// components/Header.js
import React from 'react';
import { AppContext } from '../contexts/AppContext';

class Header extends React.Component {
  render() {
    return (
      <AppContext.Consumer>
        {({ user, theme, toggleTheme }) => (
          <header className={theme}>
            <span>{user?.name}</span>
            <button onClick={toggleTheme}>테마 변경</button>
          </header>
        )}
      </AppContext.Consumer>
    );
  }
}

장단점

장점:

  • 추가 라이브러리 없이 가볍게 구현 가능
  • 보일러플레이트 최소화
  • 작은 규모의 프로젝트에 적합

단점:

  • Consumer 패턴이 중첩되면 가독성 저하
  • DevTools 지원 부족
  • 성능 최적화가 수동적

결론

5~6페이지 규모의 어드민에서는 충분히 실용적이었다. 다만 상태가 복잡해지거나 미들웨어가 필요한 시점이 오면 Redux나 MobX로 마이그레이션을 고려해야 할 것 같다. 내년에 출시 예정인 Hooks API가 나오면 Context 사용성이 더 개선될 것으로 기대된다.

React Context API로 Redux 없이 전역 상태 관리하기