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

문제 상황

사내 관리자 페이지를 만드는데, 사용자 정보와 권한을 여러 컴포넌트에서 참조해야 했다. 5~6단계 깊이로 props를 전달하다 보니 중간 컴포넌트들이 불필요한 props를 받게 되었다.

Redux를 쓰기엔 프로젝트 규모가 작았고, 기존 Legacy Context API는 공식 문서에서도 비추천하는 상태였다.

React 16.3 Context API

2018년 3월에 릴리즈된 React 16.3에서 Context API가 대폭 개선되었다. createContext와 Provider/Consumer 패턴으로 깔끔하게 사용할 수 있게 되었다.

// AuthContext.js
import React from 'react';

const AuthContext = React.createContext({
  user: null,
  login: () => {},
  logout: () => {}
});

export default AuthContext;

// App.js
class App extends React.Component {
  state = {
    user: null
  };

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

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

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

// UserProfile.js
const UserProfile = () => (
  <AuthContext.Consumer>
    {({ user, logout }) => (
      <div>
        <p>{user.name}</p>
        <button onClick={logout}>로그아웃</button>
      </div>
    )}
  </AuthContext.Consumer>
);

결과

중간 컴포넌트들이 불필요한 props를 받지 않아도 되어 코드가 깔끔해졌다. Redux 대비 설정이 간단하고, 작은 프로젝트에서는 충분히 실용적이었다.

다만 Consumer의 render props 패턴이 중첩되면 가독성이 떨어진다는 단점은 있다. 여러 Context를 사용할 때는 주의가 필요하다.

대규모 프로젝트나 복잡한 상태 로직이 필요하면 여전히 Redux가 낫지만, 간단한 전역 상태 관리에는 Context API만으로도 충분했다.