React vs. Vue vs. Angular

React

• 라이브러리이며 페이스북의 개발자 Jordan Walke가 처음 만들었다. 페이스북에서 지원하며 공동체의 의해 유지보수 된다.
• Virtual Dom 지원
• SSR - Next.js
• JSX(JavaScritp + XML)
• React Native (앱 개발까지 가능하게 해준다)

라이브러리이지만 컴포넌트를 사용한다면, 프레임워크처럼 규칙을 지켜야한다.
장점은 Virtual Dom이다. Dom 트리를 추상화하여 자바스크립트 객체로 만들어 두고 변경되는 부분은 virtual dom에서 처리하여 성능을 높혔다.
SPA(Single Page Application) 방식으로 진행한다면 검색엔진 노출(SEO : Search Engine Optimization)에 관련된 문제를 생각 했을 때 SSR을 염두해 둘 수 밖에 없었는데 Next.js를 사용하여 해결 할 수 있다. 그리고 UI를 구성하는 개별적인 뷰 단위인 컴포넌트 단위로 작성하여 생산성과 유지보수에 도움이 된다. JSX(자바스크립트 확장 문법)을 사용하여 컴포넌트를 생성할 수 있다. React Native를 이용해서 앱 개발까지 이어지는 부분이 엄청 큰 메리트가 된다.

 

Vue

 react와 vue의 차이점에 있어 가장 대표적인 것은, 먼저 react는 UI 라이브러리이며 Vue는 프레임워크라는 것이다. 

라이브러리는 참고가 용이하고, 라이브러리의 일부분만 가져와서 사용하는 게 편리하다. 그리고 리액트는 UI 라이브러리이기 때문에 리액트 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않는다. 그렇기 때문에 리액트는 별도의 라이브러리를 통해 Redux, Recoil, React-router-dom 등을 사용해야 한다. 그렇기 때문에 사용자가 필요할 때에 필요할 때 가져다 쓰고, 빼며 부분적으로 사용이 가능하다.

 반면 뷰는 자바스크립트 프레임워크이다. 부분적인 사용이 불가능하고 프레임워크 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라 작성해주어야 한다. 그렇기 때문에 라이브러리와 달리 더 많은 기능을 디폴트로 제공해준다.

 이러한 성격으로 인해 리액트는 리액트는 자바스크립트 문법을 응용하여 개발자에 따라 자유롭게 개발을 할 수 있고, 뷰는 프레임워크 사용에 지정된 문법 방식으로만 개발할 수 있다.

• 오픈소스 자바스크립트 프레임워크이며 Google의 전 개발자 Even You가 만들었다. 그를 주축으로 유지보수 중에 있다.
• Virtual Dom 지원
• SSR - Nuxt.js
• 양방향과 단방향의 바인딩 지원
• TypeScript 지원
• NativeScript
• Single File Component
• 작은 러닝커브(학습 및 적응이 빠름)

React의 장점인 Virtual Dom과 Angular의 양방향 바인딩을 가져왔다는 점에서 볼 때 앞으로도 발전을 기대해 볼 만한 프레임워크라고 생각한다.
자바스크립트의 기본 스타일을 적극적으로 적용하고 있어서 학습하고 적응하기 쉽다.
그리고 Single File Component는 .vue 파일에 HTML과 CSS 그리고 Script까지 하나로 묶어서 컴포넌트 단위로 직관적인 구성이 가능하다는 것인데, 개인적으로는 파일 분리를 선호하지만 디자이너나 퍼블리셔와 협업하는 과정에서는 생산성이나 유지보수에 큰 도움이 될 것이다.

 

Angular

• 타입스크립트 기반 오픈소스 프레임워크이며 Google에서 만들었고, 지원하며 공동체에 의해 유지보수 중에 있다.
• 양방향 바인딩 지원
• TypeScript 기반
• RxJs(Reactive Extensions For JavaScript) : 스트림을 통한 비동기 처리 방식 지원
• 가장 체계적이고 잘 정리되어있는 문서와 튜토리얼
• 큰 러닝커브 (배울 것이 많고 어렵다)

라우팅, 상태관리, 폼 유효성 등 필요한 도구를 모아놓은 All In One 프레임워크인 것이 큰 장점이다. 그렇기 때문인지 React와 Vue.js와 비교했을 때 가장 배울 것이 많고 어려운 편이다. 가볍고 빠르게 작업을 해야하는 프로젝트 보다는 큰 프로젝트에 사용하기 적합하다.
TypeScript를 기반으로 하기 때문에 엄격하지만 그만큼 직관적이고 오류를 줄일 수 있다.
또한 웹사이트가 빠르고 효율적으로 렌더링 되게 설계되어있다. MPA를 구성하기에는 복잡하고, SPA에서는 매우 빠르게 작동한다. 애초에 구글이 SPA를 위해 만든 것이라고 한다.

 

Angular 의 특징 및 장점

• Component 와 Service 단의 분리Angular 에서 Component 는 View 를 처리하는 로직만을 다루며 Service 를 다루는 로직은 분리하여 작성한다. 여기서 사용되는 Service 는 기존의 MVC 패턴에서 사용되는 Service 의 개념과 비슷하다. Component 에서 Service 단 코드를 분리함으로서 코드의 중복성을 줄여주며 유지보수에 용이하게 해준다.
• DOM 조작 방식 : React 와 Vue 는 Virtual DOM 을 활용하여 DOM을 조작하는 반면, Angular 는 Incremental DOM 방식을 채택하여 DOM 을 조작한다.
• 데이터 바운딩 (양방향 바운딩)React 에서는 데이터가 위에서 아래로 흐른다. 즉 부모 컴포넌트에서 자식 컴포넌트에 props 를 흘리는 방식으로 단방향 데이터 바운딩이 이뤄진다. 그에 비해 Angular는 데이터가 양방향으로 흐른다. 부모 컴포넌트에서 자식 컴포넌트로, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 흘려 보낼 수 있다.
• 주력 개발 언어 : Angular의 주력 개발 언어는 Typescript 이다. 이는 Typescript 가 가진 장점을 Angular 을 채택함으로써 그대로 누릴 수 있다는 것이다. Typescript 는 정적 타입 바운딩을 통해서 개발 시 에러를 줄이며, 안정성을 추구하고 자동 완성 기능을 통해 개발자의 개발 경험을 향상 시킨다는 장점이 있다.
• Angular CLI(Command Line Interface) : 앵귤러를 이용하는데 있어서 큰 장점은 CLI 가 아닐까 생각한다. CLI 를 통해서 컴포넌트, 서비스 등 필요한 기능들을 간단하게 생성하고 이용할 수 있다. 그리고 CLI 를 이용하기 때문에 디렉토리의 구조나 코딩 스타일을 획일적으로 유지할 수 있다.
• SSR (Server Side Rendering) 지원Angular 는 SPA 를 위한 프레임 워크이다. SPA 는 CSR 을 기반이지만, Angular 는 SSR 를 위한 기능들을 지원하고 있다.

 

* Virtual DOM 이란? 

React 는 컴포넌트 별로 가상 DOM 을 만들어 놓고 랜더링 시 새로운 가상 DOM 트리를 생성해 이전의 가상 DOM 과 어떤 차이가 있는지 비교 알고리즘을 통해서 비교 후 변경 사항이나, 새로운 추가 사항이 있을 시 이를 실제 DOM 에 반영하는 식으로 랜더링 한다. 이를 재조정 (Reconcilation) 이라고 하는데 React 에서는 재조정 과정을 하는데 있어서 Fiber 엔진을 사용한다.

 

 

즉 React 에서는 재조정 과정을 위해서는 메모리에 가상 DOM 을 두 개를 올려야 한다는 것이다.

Incremental DOM 방식은 랜더링 과정에서 변화를 감지하고 이를 DOM 트리에 반영하는 과정에 있어서 추가적인 메모리 공간을 요구하지 않는다.

 

Incremental DOM 이란?

 

렌더링 과정에서 변화를 감지하기 위해 실제 DOM 을 이용하며 변경 사항이 있을 시 이를 즉시 반영한다. Virtual DOM 을 활용할 때 보다 훨씬 메모리 관리에 있어서 효율적이다.

 

왜 Google 의 Angular 팀은 Incremental DOM 을 채택했을까?

Angular 팀은 모바일의 발전에 따라서 저용량의 메모리에서도 Application 의 퍼포먼스가 저하되지 않아야 한다고 생각했다. 이를 해결하기 위해서 두 가지 옵션을 최적화 했어야 했는데, 한 가지는 번들링 된 사이즈 이며, 다른 한 가지는 메모리 관리였다.

번들링된 사이즈는 Tree Shaking 을 통해서 해결할 수 있는 이슈이다. Tree-shaking 을 통해서 실제로 DOM 에 반영되지 않을 Component 들은 번들링에서 제외시킨다. 메모리 관리에 있어서는 Incremental DOM 은 추가적인 메모리 공간을 요구하지 않기 때문에 최적화가 가능한 부분이였다.

이에 Angular 팀은 Incremental DOM 을 랜더링 방식으로 채택하게 되었다.

 

 

Angular 의 단점

1. 높은 Learning curve
Angular를 이야기 할 때 보통 러닝 커브가 높다고 이야기 한다. 왜 Angular 의 러닝 커브가 높다고 이야기 하는지 생각해보면, Angular 를 통해서 처음 개발을 접하고자 할 때 진입 장벽이 타 Framework, 혹은 Library 보다 알아야 할 것이 많기 때문이다. Angular 의 Template 문법, CLI, Rxjs, HTTPClient, Routing 등.. 진입 할 때 배워야 할 것이 많아 보인다. 하지만 초기 진입 장벽만 해결한다면, Framework 의 특성상 빠른 속도로 개발하고 유지 보수에 있어서 특화되어 있다는 장점이 있다.

 

2. 자유도 저하
Angular 는 Framework 이다. Framework 의 특성 상 개발자는 개발 시 일종의 틀에 맞춰서 개발을 해야 하며 이는 개발자가 어느정도의 개발 자유도를 포기해야 함을 의미한다.

 

React 와 비교했을 때 Angular의 차이점

1. Library or Framework
2. Virtual DOM or Incremental DOM
3. Facebook or Google
4. Ecosystem of these Framework or Library

 

결론

 뷰가 진입장벽이 낮고 사용하기 용이함에도 불구하고 NPM 기준으로 React와 view의 주간 다운로드 수는 최대 4배 이상 엄청난 차이가 난다. stackoverflow 차트에서도 react의 사용이 더 많은 것을 확인할 수 있었다. 명확하게 리액트가 월등이 좋다고 할 수는 없지만, 진입 장벽이 더 높음에도 불구하고 그만큼 자유도와 typescript의 사용, 변화에 빠른 점, 월등한 사용량으로 인한 시장 크기 차이로 인해 아직 까지 vue가 react를 따라잡기에는 무리가 있어 보인다.

 뷰 역시 다양한 장점을 가지고 있고, 국내 유수한 기업에서도 사용하듯 그만의 훌륭한 기능을 가지고 있다. 그렇기 때문에 자신의 프로젝트에 알맞은 라이브러리 또는 프레임워크를 찾아보고 사용하도록 하는 것이 좋을 것이다.