React 16.3 Context API로 Props Drilling 해결하기

문제 상황

사용자 인증 정보를 여러 하위 컴포넌트에서 사용해야 하는데, props를 5단계 이상 전달하다 보니 중간 컴포넌트들이 불필요한 props를 받게 되었다. 특히 user 객체를 실제로 쓰지 않는 컴포넌트들도 전달만을 위해 props로 받아야 했다.

Context API 적용

React 16.3부터 정식으로 제공하는 Context API를 사용했다.

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

const UserContext = React.createContext(null);

export default UserContext;

// App.js
import UserContext from './UserContext';

class App extends React.Component {
  state = {
    user: { name: 'John', role: 'admin' }
  };

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        <MainLayout />
      </UserContext.Provider>
    );
  }
}

// ProfileSection.js
import UserContext from './UserContext';

class ProfileSection extends React.Component {
  render() {
    return (
      <UserContext.Consumer>
        {user => (
          <div>
            <h2>{user.name}</h2>
            <span>{user.role}</span>
          </div>
        )}
      </UserContext.Consumer>
    );
  }
}

결과

중간 컴포넌트 4개에서 불필요한 props 전달 코드를 제거했다. Redux를 도입하는 것보다 훨씬 가볍게 해결됐다. 다만 Consumer의 render props 패턴이 조금 장황한 느낌은 있다.

테마 설정이나 다국어 같은 전역 상태 관리에도 적용해볼 예정이다.