Angular에서 React로 마이그레이션 검토하며

배경

현재 회사 메인 프로덕트는 Angular 1.5 기반이다. 2년 전 시작할 때는 Angular가 안정적인 선택이었지만, 최근 React 생태계의 성장세가 심상치 않다. React 16이 나오면서 팀 내에서도 마이그레이션 논의가 나왔다.

Angular의 현실

우리 코드베이스는 전형적인 Angular 1.x 구조다.

angular.module('app')
  .controller('UserController', function($scope, $http, UserService) {
    $scope.users = [];
    $scope.loadUsers = function() {
      UserService.getUsers().then(function(data) {
        $scope.users = data;
      });
    };
  });

Two-way binding은 편하지만 성능 이슈가 있다. Digest cycle 때문에 리스트가 길어지면 느려진다. track by를 쓰면 나아지긴 하지만 근본적인 해결은 아니다.

React의 장점

React는 컴포넌트 중심이고 단방향 데이터 플로우다. 최근 React 16에서 Fiber 아키텍처가 들어가면서 성능도 개선됐다고 한다.

class UserList extends React.Component {
  state = { users: [] };
  
  componentDidMount() {
    fetch('/api/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }
  
  render() {
    return (
      <ul>
        {this.state.users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    );
  }
}

코드가 더 명확하다. JSX가 처음엔 어색했는데 익숙해지니 HTML 템플릿보다 낫다.

현실적인 고민

문제는 마이그레이션 비용이다. 30개가 넘는 화면을 다시 짜는 건 최소 3개월은 걸린다. 그동안 신규 기능 개발은 멈춰야 한다.

Angular 2+로 가는 옵션도 있지만, Angular 1에서 2로 가는 게 React로 가는 것만큼 어렵다. 그럴 거면 React가 낫다는 의견이 많다.

결론

당장 마이그레이션은 어렵다. 일단 신규 기능부터 React로 개발하는 하이브리드 방식을 제안했다. Angular와 React는 공존 가능하다. 점진적으로 전환하는 게 현실적이다.

Webpack 설정을 건드려서 두 프레임워크를 함께 번들링하는 작업부터 시작할 예정이다.