React 16.3 새 Context API로 Props Drilling 해결

배경

사내 어드민 대시보드에서 사용자 권한 정보를 최상위 컴포넌트에서 관리하고, 4~5단계 depth의 자식 컴포넌트까지 props로 전달하고 있었다. Redux를 쓰기엔 과한 느낌이었고, 기존 Legacy Context API는 불안정하다는 경고만 보고 사용하지 않았다.

React 16.3 릴리즈 노트를 보다가 새로운 Context API가 정식으로 추가된 것을 확인했다.

기존 코드

// 4단계를 거쳐 props를 전달
<Layout user={user}>
  <Sidebar user={user}>
    <Menu user={user}>
      <MenuItem user={user} />
    </Menu>
  </Sidebar>
</Layout>

중간 컴포넌트들은 user를 직접 사용하지 않지만 하위로 전달하기 위해 props를 받고 있었다.

Context API 적용

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

const UserContext = React.createContext();

export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;

// App.js
<UserProvider value={currentUser}>
  <Layout>
    <Sidebar>
      <Menu>
        <MenuItem />
      </Menu>
    </Sidebar>
  </Layout>
</UserProvider>

// MenuItem.js
<UserConsumer>
  {user => (
    <div>
      {user.role === 'admin' && <AdminMenu />}
    </div>
  )}
</UserConsumer>

결과

중간 컴포넌트 4개에서 user props를 제거했다. render props 패턴이라 약간 depth가 생기긴 하지만, props drilling보다는 훨씬 깔끔하다.

테마 설정, 다국어 등 전역으로 공유되지만 Redux까지는 필요 없는 상태들을 Context로 관리할 예정이다. Redux는 복잡한 비즈니스 로직과 서버 상태 관리에만 집중시킬 수 있을 것 같다.