곰돌이 놀이터

[기본] Angular 와 React 의 비교 본문

기본 개발 지식

[기본] Angular 와 React 의 비교

달나라 곰돌이 2018. 7. 26. 14:59

 자바스크립트 프레임워크 


프레임워크를 풀어서 말하면 설계의 바탕이 되는 기반코드와 개발자가 원하는 방식대로 이를 맞춤변환(커스터마이징)할 수 있는 라이브러리의 통합체라 할 수 있다.


자바스크립트 프레임워크는 날로 그 활용성이 높아가는 자바스크립트의 구현을 좀더 쉽고 빠르게 하면서 개발 차원에서의 효율성과 사용 차원에서의 편의성을 높이고자 하는 목적으로 개발되었다.


■ 대표적인 자바스크립트 프레임워크, Angular와 React

1. Angular 

단일 페이지 애플리케이션을 더욱 쉽게 작성하는 것을 목표로 하는 자바스크립트 프레임워크는


구글이 지원하고 있는 오픈소스 웹 어플리케이션 프레임워크로 Single Page Application 형태의 웹 어플리케이션 개발 프레임워크이다. React에 비해 활용의 자유도가 낮은 편이지만 자바스크립트 프레임워크 중 가장 큰 커뮤니티를 구축하고 있으며, 데이터 중심적, 테스트 주도적, 선언적 HTML이라는 특성을 갖추고 있다.


2. React 

페이스북에서 만들고 있는 자바스크립트 라이브러리로, 데이터가 지속적으로 변화하는 대규모 애플리케이션을 구축하기 위해서 구축되었다.


기존의 Angular와 Ember와 같은 자바스크립트 프레임워크가 서버를 보조하던 역할에서 벗어나 해시나 HTML5 History API 등 을 통해 상태별 고유 주소도 구현하는 등의 특징이 생겨 클라이언트 라이브러리 페이지가 렌더링에도 관여하게 되면서 검색엔진 최적화 및 성능 문제가 발생하게 되었고 이에 대한 극복을 하기 위한 목적으로 React를 개발하게 되었다.


 Angular의 특징 


■ Two Way Data-Binding 

전체 코드의 대부분을 차지하고 있는 특징으로 Model과 View의 데이터를 연결하여 한 쪽에서 데이터 값이 변화하면 다른 쪽에서도 바로 업데이트가 가능하게 해준다.


■ Dependency Injection 

컴포넌트들 간의 서비스 사용 및 의존성 관리가 용이하고, 코드 상에서 밀접하게 연관되어 있지 않은 컴포넌트를 테스트 하기가 쉽다.


■ Directives 

자신의 용도에 맞게 커스텀 HTML tag를 제작하여 사용할 수 있게 해준다.


 React의 특징 


■ JUST the UI 

오직 UI컴포넌트(UI구성단위)를 만들기 위한 라이브러리


■ Virtual DOM 

DOM Tree와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 HTML element들을 가진 상태에서 렌더링을 통해 DOM 조작 등 필요한 부분만을 업데이트한다. 일관성이 있어 브라우저에 의존적이지 않고 테스트가 쉬운 장점이 있으며, 메모리 상에 DOM을 구성하고 구성한 대상을 비교하여 업데이트된 부분만 갱신하기 때문에 속도가 빠른 장점이 있다.


■ DATA Flow 

데이터의 단반향 흐름을 지향하기 때문에, 양방향 데이터 바인딩을 사용하는 Angular.js처럼 코드의 양이 줄지는 않는다. 하지만 모델 이 단방향 흐름이기 때문에 모델 컴포넌트가 데이터를 UI 컴포넌트로 전달하는 쉬운 관리 애플리케이션을 만들 수 있다는 장점이 있다. 또한 이벤트를 통해 하위 컴포넌트의 변화를 감지하는 특징을 갖추고 있다. 


 Angular vs. React 


Angular와 React의 가장 큰 차이점은 Angular는 프레임워크(Framework)이고 React는 UI 구성요소 라이브러리라고 할 수 있다. 쉽게 표현하자면 React는 자체적으로 개발에 필요한 모든 요소들을 제공하지 않으며 제대로 활용하기 위해선 추가적인 구성이 필요하기 때문에 엄격히 말해 프레임워크라고 표현하지 않는다.

각 프레임워크의 개괄적이 비교는 개발사가 Google과 Facebook 이고, HTML 스크립팅이 Template 기반인지 JSX를 이용하는지, 양방향 데이터 바인딩인지 Virtual DOM diff를 이용한 데이터 동기화가 이루어지는지 정도가 되겠다.

무엇이 더 낫다고 말 할 수도 없으며, 지금의 트랜드라고 주장하기도 어려울 정도로 Webpack(https://webpack.js.org/) 기반의 용량 비교를 해보아도 눈에 띄는 차이가 없으며, 처리 속도와 사용하는 메모리 용량에 대한 차이도 거의 없기 때문에 주요 기능과 기술에 대한 비교를 통한 프레임워크를 비교하도록 하겠다.


■ 타입 정의(TypeScript vs. Flow)

프로그램 코딩을 위한 정적 타입(Type) 정의를 위해 Angular의 경우는 Angular2 부터 TypeScript를 본격적으로 적용하기 시작했고, React의 경우는 Flow를 개발해 적용하고 있다. Javascript의 가장 큰 특징 중의 하나가 유연성의 보장으로 생산성 증대를 보장하는 것이라 할 수 있는데, React의 경우는 유연성을 강조하고 개발자의 영역을 넓히는 반면 유연성에 의해 발생할 수 있는 위험성에 대한 부분을 낮추기 위해 Angular의 경우는 TypeScript를 포함해 코드내 잠재적인 위험요소를 타입정의라는 형태로 해결하고 있다. 유연성과 안정성이라는 이슈에 대한 접근이 서로 다르다고 할 수 있다.

/* @Typescript 객체 선언예제 */
interface Person {
  name : string;
  age : number;
}

/* @Flow 객체 선언예제 */
function Person(name: string, age: number): string {
  return name + "(" + age + ")";
}

■ 컴포넌트 (Template vs. JSX) 

컴포넌트는 하나의 기능을 수행하는 최소단위라는 사전적 의미를 갖고 있으며, 컴포넌트는 이식성이 존재하고 그로인한 재사용성을 증가시키는 이점이 있다.

Angular는 컴포넌트 기반 언어라는 타이틀도 갖고 있기 때문에 템플릿 작성을 위한 표준 HTML을 보장하고 이를 확장하는 방식으로 모델과 뷰, 그리고 DOM 객체를 컴포넌트화 하고 템플릿에 대한 캡슐화를 통한 이식성과 재사용성을 극대화 하는 것을 보장하여 마크업(Markup) 개발자와 코드 개발자의 자연스러운 협업을 보장하고 있다.

<!-- HTML code -->
<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="myName" />
  My name is {{ myName }}.
</div>
<!-- Javascript ode -->
angular.module('myApp).controller('myController', function($scope) {
  $scope.myName = "sungjin";
});

반면에 React는 JSX를 이용해 템플릿과 자바스크립트가 연결되어 구조와 기능이 하나로 묶여 동작하기 때문에 템플릿 자체를 디버깅할 수 있다는 장점이 있지만 JSX를 알지 못하는 마크업 개발자에겐 개발이 완료 되었을 때만 완성된 디자인 결과를 확인할 수 있다는 단점이 있다.

<!-- HTML code -->
<div id="impl"></div>

<!-- Javascript code -->
ReactDOM.render(
  <div>JSX example</div>, 
  document.getElementById('impl');
);

Angular 에서도 HTML 태그 안에 지시자(directive)에 의한 논리코드가 추가되기 때문에 구조안에 행위가 들어가게 되어 완벽하게 템플릿 다지인이 자유롭다고 할 수 없겠지만 상대적으로 익숙해지기 편한 편이다.


■ MVC 패턴을 통한 데이터 동기화 (양방향 바인딩 vs. Virtual DOM) 

AngaulrJS가 처음 발표되었을 때 가장 강력한 기능 중에 하나가 양방향 데이터 바인딩이었다. MVC 패턴의 모델(Model)이 변경되면 뷰(View)가 함께 변경되고, 뷰의 상태가 변경되면 모델의 상태도 함께 변경되어 웹 개발자들에게 신세계를 보여주면서 혁신의 시대를 열어주었다. 그러나 애플리케이션의 크기가 커지면서 데이터 바인딩을 위한 흐름이 난잡해지고 복잡도가 상승하는 문제가 발생하기 시작했다.

React는 양방향 바인딩에서 오는 복잡도 증가를 해결하기 위해 Virtual DOM 이라는 개념을 도입해 Virtual DOM 간의 비교를 통해 변경된 상태 값을 실시간으로 반영하는 방식을 선택했다.


■ 비동기 프로세스(RxJS vs. Redux) 

Angular의 경우는 Angualr2 부터 비동기 방식 통신을 위해 RxJS를 도입하여 안정성과 가독성을 높였지만 RxJS의 난해한 개념과 학습비용이 높다는 단점은 해결하지 못 했다. 물론 RxJS대신 기존의 callback과 promise 등을 사용할 수 있도록 유연성은 남겨두었지만 무언가 Angular를 제대로 사용하지 못하고 있다는 느낌을 받을 수 있다.

/* @RxJS 비동기 통신 선언예제 */
Rx.Observable
  .fromEvent(document.getElementById('login'), 'click')
  .forEach(() => lock.open());

React는 라이브러리를 지향한다는 철학에 맞게 프레임워크 수준에서의 지원이 아닌 설계수준에서 해법을 찾고자 Redux에 의해 비동기 통신에 대한 상태를 관리하여 개발자에게 다양한 방법으로 처리할 수 있도록 지원하고 있다.


Angular는 All-in-One 프레임워크라는 구글의 기본 철학과 방향성을 반영해 프레임워크의 최소기능과 안정화된 기본 기능을 제공하고 있으며, React는 기능에 충실하고 사용자에게 유연성을 보장하자는 Facebook 다운 철학을 반영하고 있다. 개발자의 성향과 프로젝트의 특성에 따라 어떤 프레임워크를 사용할지는 좋고 나쁨을 따질 수는 없으며 개발자가 고민하고 선택해야 할 몫이라 할 수 있겠다.


 참고 


http://www.incodom.kr/JavaScript_%ED%94%84%EB%A0%88%EC%9E%84_%EC%9B%8C%ED%81%AC_%EC%A0%95%EC%9D%98

Comments