Angular vs React #

Find similar titles

총 7회 업데이트 됨.

Edit

최초 작성자
yang4851 2018-03-26 06:39:26
최근 업데이트
yang4851 2018-05-08 00:47:35

Structured data

Category: Programming

Javascript는 정적 페이지 검색만을 지원하던 초기 인터넷 환경에서 인터렉티브한 페이지를 제공하고자 하는 노력과 경량 프로그램 언어의 필요에 의해 탄생되었다.

인터넷이 보편화로 웹 2.0 시대가 도래하였고 원래 자바스크립트는 단순히 페이지를 동적으로 꾸미기 위해 사용되던 것으로 한계가 명확하였으나, 서버 사이드 네트워크 프로그래밍을 지원하는 XMLHttpRequest 기술의 탄생으로 Ajax(Asynchronous Javascript and XML)에 의해 비동기 서버 통신이 가능하게 되고, SPA(Single Page Application), RIA(Rich Internet Application)에 대한 기대가 상승하면서 2000년 중후반부터 Dojo, ExtJS 등의 자바스크립트 프레임워크 개발을 통한 새로운 인터넷 패러다임을 촉발시켰다.

웹 애플리케이션 기술의 발전은 웹 개발자에게 무궁한 가능성과 함께 도전해야 할 수많은 과제를 남겨주었고, 기존 Java 개발자도 웹 개발을 할 수 있도록 JSF(Java Server Faces)나 GWT(Google Web Toolkit)같은 도구로 웹 프론트엔드 개발을 자바로 관리할 수 있게 되었으며, 현재까지 지속적으로 발전하고 있는 상태이다.

2010년 이후에는 웹 기반 애플리케이션의 자바스크립트 영역이 확장되고, 다양성과 복잡도의 증가와 자바스크립트 엔진의 혁신적인 발전으로 자바스크립트만으로도 충분히 다양한 컨텐츠(문서, 그래픽)를 처리하고 다른 빌드 언어들에 뒤지지 않는 성능을 낼 수 있게 되어, 프론트엔드 개발의 패러다임이 변화하고 있는 중이다.

대표적인 글로벌 기업인 구글(Google)과 페이스북(Facebook)은 이러한 기조에 선두 주자가 되어 다양한 시도를 하고 개발자들이 따라가기 힘들 정도의 수많은 신규 기술과 표준들을 제시하고 있다. 표준화의 힘을 배경으로 구글은 크롬(Chrome)과 함께 AngularJS를 발표하였고, 이후 페이스 북에선 React라는 프론트엔드드 프레임워크를 발표하여 현재 가장 많은 커뮤니티와 사용 사례를 내놓은 상태이다.

Angular의 경우는 AngaulrJS와 TypeScript를 기반으로 하는 Angular 계열들이 해가 바뀌기 무섭게 여러 개의 버전을 동시에 발표할 정도로 다양한 도전을 시도하고 있으며, React는 기초적인 기능에 충실하면서 성능향상을 위한 노력들이 매 버전마다 반영되었다. 이들은 오픈소스의 장에서 활발한 활동이 이루어지고 있어 한동안은 양대 프레임워크를 중심으로 발전될 것으로 전망된다.

Angular vs. React
Suggested Pages

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) 개발자와 코드 개발자의 자연스러운 협업을 보장하고 있다.
```

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="myName" />
  My name is {{ myName }}.
</div>


angular.module('myApp).controller('myController', function($scope) {
  $scope.myName = "sungjin";
});
```
반면에 React는 JSX를 이용해 템플릿과 자바스크립트가 연결되어 구조와 기능이 하나로 묶여 동작하기 때문에 템플릿 자체를 디버깅할 수 있다는 장점이 있지만 JSX를 알지 못하는 마크업 개발자에겐 개발이 완료 되었을 때만 완성된 디자인 결과를 확인할 수 있다는 단점이 있다.
```

<div id="impl"></div>


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 다운 철학을 반영하고 있다. 개발자의 성향과 프로젝트의 특성에 따라 어떤 프레임워크를 사용할지는 좋고 나쁨을 따질 수는 없으며 개발자가 고민하고 선택해야 할 몫이라 할 수 있겠다.