[번역] Angular 2 vs. React

다음 글의 번역입니다. 저자에게 번역글에 대한 허가를 받고 작성한 글입니다. (www.backand.com)

[Angular 2 vs. React - Itay Herskovits]

If writer does not want this article, please contact me.(han41858@gmail.com)

---

 이전 포스팅에서 프론트엔드 JavaScript 프레임웍으로 유명한 ReactJS 와 AngularJS 를 비교해보았다. Angular 2.0 의 발표가 임박한 시점에서, 다시 한 번 React 와 비교해보고 어떤 점이 바뀌었는지 살펴보려고 한다. 이 글에서는 React 와 Angular 2.0 을 비교하고 각각의 장단점을 분석해본다.

 ReactJS 빠르게 돌아보기

 React 는 Facebook 에서 성능 좋은 유저 인터페이스를 구현하는 것을 목표로 만들어진 JavaScript 웹 프레임워크이다. React 는 다른 JavaScript 프레임웍들이 겪었던, 다량의 데이터셋을 효율적으로 처리하는 것을 목표로 만들어졌다. React 는 virtual DOM 을 사용하고, 변동사항이 있을 때 전체 페이지를 다시 렌더링 하는 방식 대신에, 관련있는 부분만 갱신하는 메카니즘을 사용한다. React 는 DOM 을 전체적으로 변동시키는 Angular 1.X 와 같은 다른 프레임워크들을 속도에서 압도하며 빠른 속도를 이끌어냈다.

 Angular 2 에서 향상된 점

 Angular 2 는 Angular 1 의 현식을 더욱 이어갔다. 먼저, Angular 2 는 재사용 가능한 프론트엔드 컴포넌트를 만드는 것에 더욱 집중한다. Angular 1 을 쓰는 것도 역시 가능하면서도, 버전 2 에서는 $scope 나 controller 에서 재사용의 장벽이 되는 많은 요소를 제거했다. 디렉티브도 매우 간단해졌고 Angular 2 코드는 Angular 1.x 에 비해 더 간결하고 읽기 쉬워졌다. 또한, Angular  2 는 TypeScript 를 도입하여 타입 체크를 위한 검증 코드의 수고를 줄였다. 성능과 프레임워크의 구조적인 향상을 통해 Angular 2 는 프론트엔드 프레임워크 패턴에 대한 완전히 새로운 모습을 제공한다.

 알아두어야 할 점

 React 와 Angular (어떤 버전이든) 을 비교하는 것은 사과와 오렌지를 비교하는 것과 비슷하다는 것을 염두에 두어야 한다. Angular 는 프론트엔드 프레임워크로 설계되었고 클라이언트 측의 전체 아키텍처를 제공하며 클라이언트 코드를 기능적으로 긴밀하게 다룰 수 있는 도구이다. React 는 라이브러리로서, 프론트엔드 아키텍처에서 좀 더 적은 비중을 차지하고 전체 구조의 일부를 담당하는 것에 집중한다. 둘을 비교하는 것이 이상할 수 있지만, 비슷한 점이 충분히 있고 둘의 장단점을 비교하는 것은 충분히 유익하다.

 아키텍처

 위에 언급한 것과 같이, React 는 빠르게 업데이트하고 렌더링하는 템플릿을 만드는 JavaScript 라이브러리다. 그래서 실제로 React 에서는 아키텍처의 포인트는 없다. 클라이언트측의 큰 맥락에서는 툴이라고 하는 것이 적합하다.

 반면에 Angular 2 는 Angular 1 의 철학 위에서 만들어졌고, 프론트엔드 코드가 어떤 모습이 되어야 하는 지에 대한 "올바른 길" 을 제시하는 프레임워크이다. Angular 2 는 컴포넌트 구성과 타입 안전성을 신경쓰고 있기 때문에, 개발자는 재사용 가능하고 캡슐화된 프론트엔드 객체를 바탕으로 코드를 어떻게 모듈화하는 지에 대해서 집중하면 된다.

 이런 이유에서 React 와 Angular 2 는 실제로 비교할만 하지는 않다. 더 자유로운 코드 구조를 위해 React 는 좋은 선택이고 Angular 2 는 프론트 엔드의 코드 전체 구조를 아우르는 기술로서 중요하다. 최종적으로 어떤 패턴이 "좋은" 패턴인지는 당신의 어플리케이션이 어떻게 구성되는지에 따라 달라진다.

 템플릿

 두 개의 프레임워크는 각각 템플릿 툴을 제공하지만 관리하는 방식에서 상당히 다른 접근 방식을 택한다. React 는 템플릿 오브젝트를 JSX 최상단에 올려두고 템플릿을 인라인으로 구성하거나 한 곳에 모든 템플릿을 구성할 수 있다. 반면에 Angular 2 는 어플리케이션을 구성하는 JavaScript 나 렌더링 될 HTML 와 물리적으로 분리하는 방식을 유지하고 있다.

 TypeScript 로 일관성있는 기능 단위의 컴포넌트를 구성하는 방식은 당신이 템플릿을 좀 더 일관된 방식으로 만들어서 재사용성과 유연성을 Angular 1.x 보다 증대시키는 것이 핵심이다. 최종적으로 패턴을 적용하자면 기능적인 것과 함께 철학에 대해 선택이 필요하다. React 템플릿은 좀 더 가볍고 렌더링하기 빠르게 만들기를 원하고 Angular 2 컴포넌트는 더욱 재사용 가능하고 투웨이 바인딩을 이용하여 어플리케이션 오브젝트로써 관리하기 쉽기를 원한다.

 네이티브 지원

 Angular 2 와 React 는 서로 다른 목표를 가지고 있기 때문에 모바일 앱에 적용하는 네이티브 코드에 대해서도 상당히 다른 관점을 갖고 있다. Angular 2 팀은 Angular 를 그 자체로써 프레임워크로 택하고 있기 때문에 Ionic 이나 NativeScript 와 같은 벤더들이 코드를 디바이스에 실행 가능한 형태로 "변환"하도록 지원한다. 그러나 React 는 React 코드를 네이티브 앱으로 변환하는 React Native 를 통해 기존 방식의 하이브리드 웹 앱에서 성능 향상을 돕는 방식으로 지원한다.

 다시 한 번 말하자면 "올바른" 선택을 하는 것은 당신의 어플리케이션의 목표에 따라 달라진다. 당신이 엄청나게 빠른 모바일 앱 경험을 원한다면 React 가 최선이다. 하지만 당신이 컴포넌트화된 어플리케이션 구조 전체를 다루고 좀 더 지속 가능한 코드 구조를 위해 약간의 성능 희생을 감수한다면, Angular 2 와 밀접한 Ionic 과 같은 프레임워크가 당신의 요구사항에 적합할 수 있다.

 결론

 Angular 2 와 React 중에 하나를 선택하는 것은 선호하는 스타일의 문제다. React 는 라이브로써 렌더링 속도에 초점을 맞추고 크고 복잡한 UI 표현에 적합한 도구다. 반면에 Angular 2 는 개발 과정에 좀 더 넓은 시각을 갖고 있다. 트렌드를 선도하는 프레임워크로써 훌륭하고 재사용 가능한 UI 경험을 제공하기도 하지만, 앱을 어떻게 만드는 것이 나은지에 대한 가이드를 제시한다.

 최종적으로 결정은 당신의 어플리케이션의 목표나 개발팀의 의견에 달려있다. 복잡하고 큰 유저 인터페이스에서도 훌륭한 성능을 내고 싶다면 React 가 좋은 선택이고, 개발 프로세스나 코드의 아키텍처에 대한 수준 향상을 위해서라면 Angular 2 가 적합할 수 있다. 언제나 그렇듯이 당신의 개발 팀의 요구사항과 문제 영역에 대한 이해를 통해서만 잘못된 선택을 하지 않을 수 있을 것이다.

 Before we end, a shameless plug for Backand. Our backend-as-a-service supports both Angular 2 and React. If you don’t have a free account yet, GET ONE HERE. (포스팅 글 홍보 문구로 굳이 번역하지 않습니다.)

 Angular 2 examples and Starter Apps

 React examples and Start Apps