Vue vs React 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를 이용해서 앱 개발까지 이어지는 부분이 엄청 큰 메리트가 있는 것 같다.

---

Angular

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

라우팅, 상태관리, 폼 유효성 등 필요한 도구를 모아놓은 All In One 프레임워크인 것이 큰 장점이다.

그렇기 때문인지 React와 Vue.js와 비교했을 때 가장 배울 것이 많고 어려운 편이다.

가볍고 빠르게 작업을 해야하는 프로젝트 보다는 큰 프로젝트에 사용하기 적합하다.
TypeScript를 기반으로 하기 때문에 엄격하지만 그만큼 직관적이고 사전에 오류를 잡을 수 있다.
또한 웹사이트가 빠르고 효율적으로 렌더링 되게 설계되어있다. MPA를 구성하기에는 복잡하고, SPA에서는 매우 빠르게 작동한다. 애초에 구글이 SPA를 위해 만든 것이라고 한다.

---

Vue.js

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

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

---

  [ React vs Vue vs Angular ]  

 

React는 UI 라이브러리입니다.

라이브러리는 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용하는 게 편리합니다.

또한 React는 UI 라이브러리이기 때문에 자체만으로는 전역 상태 관리, 라우팅, 빌드 시스템 등을 지원하지 않습니다.

앞선 기능들을 사용하려면 Redux, Mobx 등을 사용 해야 합니다.

 

반면 Vue는 자바스크립트 프로그레시브 프레임워크입니다.

Vue는 라이브러리처럼 사용 할 수 있도록 처음부터 설계 되었고,

이러한 이유로 라이브러리라고 표현 할 수 있지만, 지향하는 방향은 “프로그래시브(진보적인) 프레임워크”입니다.

 

즉, 일반적인 프레임워크 보다 더 자유도가 높으며,

시스템 수준에 따라 프레임워크의 활용도를 결정 할 수 있게 설계 되었습니다.

 

Angular는 프레임워크로써 일반적으로 HTML, SCSS, TS 파일을 따로 분리하여 컴포넌트를 개발합니다.

반면 React는 JSX 문법과 styled-components 라이브러리를 사용하여
오직 JavaScript만으로 컴포넌트를 개발하는 것이 대세가 되어 가고 있습니다.

---

  [ 라이브러리 vs 프레임워크 ]  

 

• 라이브러리
  : 참조가 쉽고, 라이브러리의 일부분만 가져와서 사용 할 수 있어 편리하다는 특징을 가지고 있습니다.
• 프레임워크
  : 설계의 바탕이 되는 기반 코드와 개발자가 원하는 방식대로 이를 맞춤 변환(커스터 마이징) 할 수 있는 라이브러리의 통합체라고 할 수 있다. 즉, 코드를 프레임에 맞춰서 개발하는 방식입니다. 단편적인 예로 뷰에서는 파일을 만들 때 .vue라는 형태에 맞춰 사용합니다. 물론 .vue가 아닌 .js 파일을 사용해 프로젝트를 만들 수도 있지만 효율성이 훨씬 떨어집니다. 프레임워크는 프레임을 따라 개발하는 데에 최적화된 형태일 뿐만 아니라 라이브러리와 달리 더 많은 기능을 default로 제공합니다.

요즘은 프레임워크와 라이브러리를 구분하지 않고 섞어서 사용하는 추세입니다.

---

[기본] Angular 와 React 의 비교

TIL | #2 React, Angular, Vue.js 비교