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

배경

2년간 유지보수하던 Angular 1.x 프로젝트의 성능 이슈가 한계에 도달했다. 컴포넌트가 200개가 넘어가면서 digest cycle이 눈에 띄게 느려졌고, Two-way binding의 복잡도가 디버깅을 어렵게 만들었다.

Angular 2+로 마이그레이션하는 방안도 검토했지만, 러닝커브와 번들 크기 문제로 React를 선택했다.

프로젝트 특성상 모바일 사용자가 많아 번들 크기가 중요했다.

React의 npm 생태계가 Angular보다 활발했다. 특히 UI 라이브러리 선택지가 많았고, 커뮤니티 규모도 컸다.

최근 6개월간 면접 본 지원자 중 React 경험자가 Angular 경험자보다 3배 많았다. 팀 확장을 고려하면 React가 유리했다.

점진적 마이그레이션을 위해 ngReact를 사용하기로 했다. Angular directive 안에 React 컴포넌트를 렌더링하는 방식이다.

angular.module('app').directive('reactComponent', function(reactDirective) {
  return reactDirective(MyReactComponent);
});

새로운 기능은 React로 개발하고, 기존 Angular 코드는 리팩토링 일정에 맞춰 점진적으로 교체할 계획이다.

일단 3개월 내 주요 페이지 2~3개를 React로 전환하고 성과를 측정해볼 예정이다.