React 16.3 새로운 Context API 도입기

배경

그동안 프로젝트에서 전역 상태 관리를 위해 Redux를 사용해왔다. 하지만 단순히 테마나 로케일 정보를 하위 컴포넌트에 전달하는 용도로는 보일러플레이트가 과하다는 생각이 들었다.

기존 React의 context API는 experimental 상태였고, 공식 문서에서도 사용을 권장하지 않았다. 그런데 이번 16.3 버전에서 정식 Context API가 공개되어 테스트해보기로 했다.

적용 과정

기존에는 props drilling으로 5단계 깊이까지 테마 정보를 전달하고 있었다.

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>버튼</button>}
    </ThemeContext.Consumer>
  );
}

Provider와 Consumer 패턴으로 중간 컴포넌트를 거치지 않고 직접 데이터를 전달할 수 있게 되었다.

결과

테마와 다국어 설정을 Context로 분리하니 코드가 훨씬 명확해졌다. Redux는 복잡한 비즈니스 로직에만 사용하고, 단순 전달용 데이터는 Context로 처리하는 것이 합리적이라고 판단했다.

다만 Context를 과도하게 사용하면 컴포넌트 재사용성이 떨어질 수 있어서, 적용 범위를 신중하게 결정해야 할 것 같다. 당분간은 UI 관련 설정값 정도만 Context로 관리할 예정이다.