Angular 프로젝트에서 React로 마이그레이션 결정한 이유

배경

2년간 유지보수해온 Angular 1.x 프로젝트가 한계에 도달했다. 기술 부채가 쌓이고 신규 개발자 온보딩도 어려워졌다. Angular 2+로 갈지, React로 갈지 2주간 검토한 결과 React를 선택했다.

Angular 2+를 선택하지 않은 이유

마이그레이션 경로의 복잡성 - Angular 1.x에서 2+로의 마이그레이션은 사실상 재작성에 가깝다. TypeScript 강제, 완전히 다른 아키텍처 때문에 학습 곡선이 가파르다.
프레임워크 무게감 - 우리 프로젝트는 SPA지만 상대적으로 가벼운 대시보드 성격이다. Angular의 DI 시스템, RxJS 등은 과한 측면이 있었다.
생태계 트렌드 - 최근 채용 시장과 오픈소스 생태계를 보면 React 비중이 계속 높아지고 있다.

React 선택 이유

점진적 마이그레이션 가능 - 기존 Angular 1.x 앱 일부에 React 컴포넌트를 삽입하는 방식으로 단계적 전환이 가능하다.
학습 곡선 - JSX와 컴포넌트 개념만 익히면 시작할 수 있다.
생태계 - Redux, React Router 등 검증된 라이브러리가 많다.

마이그레이션 전략

// Angular 컨트롤러 내에서 React 컴포넌트 마운트
angular.module('app').directive('reactComponent', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      ReactDOM.render(
        React.createElement(MyReactComponent, scope.props),
        element[0]
      );
      
      scope.$on('$destroy', function() {
        ReactDOM.unmountComponentAtNode(element[0]);
      });
    }
  };
});

새로 개발하는 기능부터 React로 작성하고, 레거시는 유지보수만 하는 방향으로 진행한다. 6개월 내 주요 화면 전환을 목표로 잡았다.

우려사항

React 16이 나온 지 얼마 안 됐고, 상태 관리 방법론이 아직 정립되지 않은 느낌이다. Redux는 사용할 예정이지만 보일러플레이트가 많다는 단점이 있다. 하지만 Angular로 계속 가는 것보다는 나은 선택이라 판단했다.