React 와 Vue, Angular 장단점과 특징

0. npm Trends

https://npmtrends.com/angular-vs-react-vs-vue

1. react 가 압도적인 다운로드 횟수를 이어왔음
   1. 프로젝트의 규모가 크고 확장될 가능성이 높은 경우
   2. 자바스크립트의 문법이 능숙한 개발자
   3. 컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 경우
   4. 자유도가 높은 개발환경을 선호할 경우
   5. TypeScirpt 도입을 고려할 경우
2. vue 가 최근 급속도로 다운로드 횟수가 증가함
   1. 규모가 작고 가벼운 프로젝트
   2. 빠른 속도가 핵심인 프로젝트
   3. 자바스크립트 문법이 미숙한 개발자
   4. 퍼블리셔가 있거나 기존 html, css, js 코드를 SPA로 변경할 경우
   5. 개발자간 코드 통일성, 커뮤니케이션 비용을 줄이고 싶은 경우

1.  Angular

• 앵귤러는 AngularJS 로 부터 시작
  • 앵귤러는 구글사에서 2010년 10월에 자바스크립트 기반의 오픈 소스 프론트엔드 웹 어플리케이션 프레임워크로
    발표함으로써 세간에 등장
•  AngularJS는 Angular 2를 출시
  • Angular 팀은 AngularJS 와의 혼동을 피하기 위해 Angular2 에서 버전을 뺀 Angular 라는 이름으로 완전 출시
  • Typescript 를 바탕으로 개발을 해야함
  • 기존의 AngularJS 의 코드와 호환이 안됨
• Angular의 특징 및 장점
  • SPA(Single Page Application) 를 위한 Framework
    • 비교 ) React : 라이브러리
      • 라이브러리: 사용자가 필요할 때 부분적으로 사용이 가능함, 자유도가 높음
  • 개발사가 Google 
    • 성능이 보장되고 오랜 기간 프레임 워크를 서포팅이 가능
  • Component 는 View 를 처리하는 로직만을 다루며 Service 를 다루는 로직은 분리하여 작성
    • 코드의 중복성을 줄여주며 유지보수에 용이
  • 데이터 양방향 흐름
    • 부모 컴포넌트에서 자식 컴포넌트로, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 흘려 보낼 수 있음
  • 주력 개발 언어가 Typescript
    • Typescript 는 정적 타입 바운딩을 통해
      개발 시 에러를 줄이며, 안정성을 추구하고 자동 완성 기능을 통해 개발자의 개발 경험을 향상
  • Angular CLI(Command Line Interface)
    • CLI를 통해 필요한 기능들(컴포넌트, 서비스 등)을 간단하게 생성 가능
    • 디렉토리의 구조나 코딩 스타일을 획일적으로 유지
  • SSR (Server Side Rendering) 지원
  • Incremental DOM 방식을 채택하여 DOM 을 조작
    • React 와 Vue 는 Virtual DOM 을 활용
    • Incremental DOM
      • 랜더링 과정에서 변화를 감지
        이를 DOM 트리에 반영하는 과정에 있어서 추가적인 메모리 공간을 요구하지 않음
• Angular의 단점
  •  러닝 커브가 높음
    • Angular 를 통해서 처음 개발을 접하고자 할 때 진입 장벽이 타 Framework, 혹은 Library 보다 알아야 할 것이 많기 때문
  • 자유도 저하

2.  React

• 페이스북의 개발자 Jordan Walke가 개발한 사용자 인터페이스를 만드는 데 사용하는 자바스크립트 라이브러리
  • 페이스북에서 지원하며 공동체가 유지보수 함
  • 라이브러리지만 컴포넌트를 사용한다면, 프레임워크처럼 규칙을 지켜야 함
• React의 특징 및 장점
  • Virtual DOM 지원
    • DOM트리를 추상화하여 자바스크립트 객체로 만들고
      변경되는 부분은 Virtual DOM에서 처리
  • SPA(Single Page Application) 방식
    • SEO문제 관련하여 SSR과 CSR을 함께 사용할 수 있는 Next.js를 사용하여 해결
  • JSX(JavaScript + XML)
    • 자바스크립트 확장 문법
  • React Native
    • 모바일 앱 개발 가능 -> 유연성이 높음
  • 컴포넌트를 사용한 UI 재사용 가능
  • 다른 프레임워크나 라이브러리와 병행하여 사용 가능
    • 확장성 높음
• React의 단점
  • IE8 이하 버전은 지원하지 않음
  • view 이외의 기능은 직접 구현하거나 라이브러리를 사용하여 구현해야 함
    • JavaScript 지식이 필수 선행
  • 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안 됨
    • 라이브러리 설치로 보완 가능
  • 로딩시간이 상대적으로 길다
  • 웹의 지향점과는 거리가 멀다
    • 웹의 핵심 : 모든 것을 streaming하며, 페이지들은 HTML 태그들을 내포하고 가벼운 응답만 브라우징함
    • 리액트 : 사이트에 필요한 자바스크립트를 처음에는 공백 페이지를 띄우며 다운로드
      한 번 다운로드한 후에는 다시 리소스를 다운하지 않아도 됨. 처음 보이는 것이 없다는 것이 스트리밍과의 차이

 

3.  Vue

• 구글 엔지니어 Evan You가 설계한 웹페이지 화면을 개발하기 위한 점진적인 프레임 워크
  • 점진적인 프레임 워크 : 라이브러리 기능 + 프레임워크 기능
• Vue의 특징과 장점
  • 러닝커브가 낮음
    • 점진적 채택 가능
    • JavaScript에 대한 이해도가 상대적으로 낮아도 이용 가능(view 문법)
  • 빠른 렌더링 속도
    • Vue.js의 가벼운 특성으로 인해 상대적으로 빠름
    • 가상 DOM을 이용해 렌더링 속도를 높임
  • UI 화면단 라이브러리
    • MVVM 패턴의 view 모델에 해당하는 화면단 라이브러리
    • 화면의 요소를 제어하는 코드와 데이터 제어 로직 분리
      • 코드를 직관적으로 이해, 유지 보수 편리
  • 컴포넌트 기반
    • 재사용성, 코드 가독성 높음
  • 양방향 데이터 바인딩과 단방향 데이터 흐름을 모두 가지고 있음
  • Vue의 단점
    • 유연함이 너무 높음
      • 큰 프로젝트에서 오류가 발생할 가능성 높음
    • 제한성
      • 다른 종류의 프레임워크만큼 많은 플러그인이나 구성 요소가 없음

 

 

 

출처 : https://velog.io/@kangactor123/AngularwithReact

Angular 살펴보기 및 React 와의 비교

https://velog.io/@goblin820/TIL-2-Vue-React-Angular

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