Builder.shin

Redux에서 Context API로 전환한 이유

배경

회사 내부 관리 툴을 React로 개발하면서 당연하게 Redux를 도입했다. 하지만 프로젝트 규모가 작아지면서 Redux의 보일러플레이트가 부담스러워졌다. 액션 타입, 액션 크리에이터, 리듀서를 매번 작성하는 게 과했다.

React 16.3에서 새로운 Context API가 정식 출시되었고, 이를 활용해 상태 관리를 단순화할 수 있을 것 같았다.

구현

기존 Redux 스토어를 Context + useReducer 패턴으로 교체했다.

const UserContext = React.createContext();

class UserProvider extends React.Component {
  state = {
    user: null,
    isLoading: false
  };

  setUser = (user) => {
    this.setState({ user });
  };

  render() {
    return (
      <UserContext.Provider value={{
        ...this.state,
        setUser: this.setUser
      }}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

Redux DevTools는 사용할 수 없게 됐지만, 콘솔 로그로 충분히 디버깅 가능했다.

결과

  • 번들 사이즈 약 30KB 감소
  • 새 기능 추가 시 파일 생성 횟수 감소
  • 코드 가독성 향상

한계

중첩된 Provider가 많아지면서 Provider Hell이 발생했다. 그리고 Context 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링되는 문제가 있었다. 성능 최적화를 위해 Context를 도메인별로 분리해야 했다.

규모가 큰 프로젝트라면 여전히 Redux가 나을 것 같다. 하지만 작은 프로젝트에서는 Context API만으로도 충분히 관리 가능하다는 걸 확인했다.

Redux에서 Context API로 전환한 이유