React vs Angular vs Vue js Comparison

nicegirl
8 min readMay 16, 2018

--

회사에서 색다른 단위의 프로젝트가 주어졌다. 이참에 새로운 framework를 사용할 수 있는 좋은 기회가 와서 기존 jquery, handlebar.js를 제외한 다른 front-framework를 사용해보고자 한다. 최근 2017년도 평이 높았던 framework 사이트를 참고하여 추려낸 결과

React, Angular, Vue 세가지를 비교분석하여 가장 적합한 framework를 선택하고자 한다.

Considerations

  • 인지도, 자료의 다양성 및 양 (tutorial, stack Overflow 등등)
  • 버전업의 신뢰성 및 관리기간(너무 오랫동안 관리가 안되고 있다든지, 신뢰되지 못한 개발자의 유지보수 등등)
  • 빠르게 개발이 가능한가? (기간 스터디 포함 1달이내)
  • 접근성 (처음 접할때 이해가 어렵거나 공부기간이 너무 길다면 1달 내 개발하기 어렵다)
  • 외부 라이브러리를 활용하기 수월한가? (editor 라이브러리를 많이 참고해야하기 때문이다)

Diff

markdown으로 표를 만들었던 부분이 복사가 안돼 이미지 캡쳐로 가져왔다.간략하게 세가지를 비교 분석한 결과다.

ref. Angular vs. React vs. Vue: A 2017 comparison

Intro

React — javascript library

Facebook이 만들고 MVC프레임워크에서 V(view)부분을 컴포넌트로 만들기 위해 만들어진 라이브러리이다.(Handlebars와 같은 템플릿 엔진이 아니다)

Virtual DOM

React의 가장 큰 특징은 바로 가상 DOM을 이용한다는것이다.

가상 돔(Virtual DOM)이란?

HTML DOM의 추상화한 개념. 즉, DOM의 복사본이라 볼 수 있다. DOM Tree와 같은 구조체를 가지고 있다. 만약 DOM에 수정을 가해진다면 실제 DOM에 바로

적용되기 보다 가상 돔에 먼저 적용시킨 후, 전후상태를 DOM과 비교하여 변경이 필요한 최소한의 요소만 실제 DOM에 반영한다. 따라서 dom변경시 렌더링횟수를 줄일 수 있기 때문에,

다시 그려지는 비용와 자원도 줄일 수 있다는 장점을 가지고 있다.

UI

React는 UI컴포넌트만 지원한다. 또한, Backbone.je의 뷰 부분을 React.js로 구현하거나 Angular.js의 directive를 React.js를 사용해 구현하는 등 여러 환경과 조합해 사용할 수 있다.

Data Flow

단방향 데이터 흐름을 지향한다. (참고로 뒤에 소개할 Angular.js는 양방향 데이터 흐름을 지향한다.)

데이터 흐름(데이터바인딩)

정보의 소스와 데이터 모두 일치시키는 것을 말한다. 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것.

● 단방향 데이터 바인딩: 데이터와 템플릿을 결합하여 화면을 생성한다.

● 양방향 데이터 바인딩: 데이터 변화를 지켜보며 템플릿과 결합하여 화면을 갱신하는 것 뿐만아니라 화면에 입력된 데이터를 갱신하여 데이터의 일관성을 유지시킨다.

JSX

React는 두가지 문법을 지원하는데 자바스크립트와 JSX(XML과 유사)문법을 지원한다. JSX는 HTML문법과 친숙해서 코드를 짜는데 더 쉽다는 평이 있었다. 이 JSX로 렌더링 하는 경우 몇가지 장점이 존재한다.

  • 전체 프로그래밍 언어의 기능을 사용하여 화면을 빌드할 수 있다.
  • jsx의 툴링지원(linting, 형 검사, 에디터 자동완성)은 꽤 잘 돼있는 편에 속한다.

React Native

Javascript를 이용하요 기본 앱을 제작하는 플랫폼이라 할 수 있다. (Anroid / iOS)

AngularJS — javascript framework

Google에서 제작 배포하고 있는 구조적 MVW(Model View Whatever 또는 MVC)프레임워크로 SPA(Single Page Application)형태의 웹 어플리케이션을 개발할 수 있도록 돕는다. (웹앱 개발 생산성에 중점을 둔다)

SPA란?

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. — Wikipedia -

즉, 요청시마다 새로고침이 일어나 페이지를 로딩하는 것이 아니라 최초 한번만 로딩 후 데이터만 변경해서 사용하는 것을 말한다.

Data Flow

Angular의 가장 뚜렷한 특징 중 하나가 바로 데이터 바인딩이 양방향으로 된다는 점이다.

<!-- index.html --><body ng-app><span>Insert your name:</span><input type="text" ng-model="user.name" /><h3>Echo: {{user.name}}</h3></body>

위 예제에서 볼 수 있듯이 input에 입력한 내용이 h3에 있는 user.name이 바로 출력되는 것을 확인할 수 있다. 이게 angular의 two-way binding이라 불리며 model → view , view → model에게 서로 영향을 주며 모델을 출력할수 있게 한다. 이 부분을 잘 연결짓는 개념이 바로 $scope라 한다. $scope는 컨트롤러와 템플릿을 연결하고 모델을 보강해서 양방향 바인딩을할 수있게 하는 객체이다. (*ng-app은 Angular에게 body요소가 Angular가 포함되어 있다고 알려주는 것)

Environment

Angular CLI을 통해 간편한 개발 환경 구축을 지원한다. 명령어를 통해 프로젝트 생성에서부터 빌드, 테슽, 구성요소 추가 등을 할 수 있으며 개발용 서버까지 내장하고 있어 실행이 가능하다. 그리고 Lazy loading을 통해 SPA의 특징인 어플리케이션 번들 크기가 커지면서 초기 오랜 로딩시간을 줄여줄 수 있다.

시용자가 기능을 요청하게 될 때 비동기식으로 스크립트를 불러와 실행할 수 있게 돕는다. (참고문서이동)

[그림 TypeScript 범위]

Angular (Angular 2)

Angular2는 완전히 새로워진 것이라 판단하면 된다. Angular2에서는 1급 컴포넌트 시스템이 존재하고 TypeScript가 필수적이다.(Javascript의 확장 언어이다.) 따라서 Java와 C#등 Class기반을 다루던 개발자에게 친숙하다. 생산성과 더불어 여러플랫폼에 맞춤형 개발을 할 수 있도록 개발 범위를 확장할 수 있도록 중점을 두고 있다.

ng-conf 2016의 Keynote에 따르면 Angular2는 전작보다 최초 혹은 러닝타임 렌더링 성능이 약 5배 더 빨라졌다고 한다. 하지만 react, vue와 상대적으로 자체 코드의 크기가 크다는 문제가 제기되기도 했다.

Vue — javascript framework

Vue는 최근 javascript의 다트호스로 등장한 프레임워크이다. 일단 초기 진입장벽이 높지 않으며(스터디 습득력) 경량적이며 속도도 빠르다고 말할 수 있다(경험자로서…)

Data Flow

Vue는 단방향, 양방향 바인딩을 둘 다 지원해주고 있다. 컴포넌트 간에 단방향의 데이터 흐름을 기본적으로 사용한다.

Virtual DOM

Vue역시 React와 같이 가상 DOM을 사용하기 때문에 이 부분에 대한 설명을 생략하겠다. (템플릿 엔진을 사용하지 않음)

Environment

vue-cli로 쉽게 프로젝트를 구성할 수 있다고 한다.

Reference Sites

-Nicegirl-

--

--