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

배경

신규 어드민 대시보드 프로젝트를 시작하면서 상태 관리 방식을 고민했다. 기존에는 Redux를 사용했지만, 이번 프로젝트는 규모가 작고 복잡한 비동기 로직이 많지 않아 오버엔지니어링이라는 판단이 들었다.

React 16.3부터 Context API가 안정화되면서 충분히 사용 가능한 수준이 되었다고 판단해 도입을 결정했다.

구현

사용자 정보와 인증 상태를 관리하는 Context를 만들었다.

import React, { createContext, Component } from 'react';

const AuthContext = createContext();

class AuthProvider extends Component {
  state = {
    user: null,
    isAuthenticated: false
  };

  login = (userData) => {
    this.setState({
      user: userData,
      isAuthenticated: true
    });
  };

  logout = () => {
    this.setState({
      user: null,
      isAuthenticated: false
    });
  };

  render() {
    return (
      <AuthContext.Provider
        value={{
          ...this.state,
          login: this.login,
          logout: this.logout
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

export { AuthContext, AuthProvider };

컴포넌트에서는 Consumer를 통해 접근했다.

import { AuthContext } from './AuthContext';

const Header = () => (
  <AuthContext.Consumer>
    {({ user, logout }) => (
      <div>
        {user && <button onClick={logout}>로그아웃</button>}
      </div>
    )}
  </AuthContext.Consumer>
);

결과

• Redux 관련 보일러플레이트 코드가 사라져 개발 속도가 빨라졌다
• 번들 사이즈가 약 15KB 감소했다
• 러닝 커브가 낮아 신입 개발자도 빠르게 적응했다

다만 Context 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링되는 이슈가 있었다. 상태를 여러 Context로 분리해서 해결했다.

정리

작은 프로젝트에서는 Context API만으로도 충분했다. Redux의 미들웨어나 개발자 도구가 필요한 복잡한 상황이 아니라면 좋은 선택지라고 생각한다.