React 16.3 새로운 Context API 도입기

문제 상황

사내 대시보드 프로젝트에서 사용자 인증 정보를 5~6단계 depth로 전달하는 prop drilling이 발생했다. Redux는 과하다는 팀 의견이 있었고, 기존 Context API는 실험적 기능이라 프로덕션 사용이 꺼려졌다.

React 16.3이 릴리즈되면서 공식 Context API가 stable로 변경되어 도입을 결정했다.

적용 방법

// 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>
        <span>{user.name}</span>
        <button onClick={logout}>로그아웃</button>
      </div>
    )}
  </AuthContext.Consumer>
);

결과

중간 컴포넌트 7개에서 불필요한 props를 제거했다. Consumer 패턴이 render props 형태라 다소 번거롭지만, 코드 가독성은 확실히 개선됐다.

TypeScript 도입도 고려 중인데, Context와의 타입 호환성을 먼저 검증해봐야 할 것 같다.