Angular 대 React 대 Vue 2022

게시 됨: 2020-11-26

모든 프론트엔드 개발자가 들어본 웹 애플리케이션 구축을 위한 세 가지 프레임워크인 React, Vue.js 및 Angular가 있습니다.

React는 UI 라이브러리이고 Angular는 완전한 프론트엔드 프레임워크이며 Vue.js는 프로그레시브 프레임워크입니다.

프런트 엔드 응용 프로그램을 빌드하는 데 거의 상호 교환적으로 사용할 수 있지만 100% 동일하지는 않으므로 비교하고 차이점을 이해하는 것이 좋습니다.

각 프레임워크는 구성 요소 기반이며 UI 기능을 빠르게 생성할 수 있습니다.

그러나 그들은 모두 다른 구조와 아키텍처를 가지고 있습니다. 따라서 먼저 아키텍처의 차이점을 살펴보고 그 뒤에 숨겨진 철학을 이해하겠습니다.

건축학

반응

React는 특정 프로젝트 구조를 강요하지 않으며 아래 공식 "Hello World" 예제에서 볼 수 있듯이 몇 줄의 코드로 React를 사용할 수 있습니다.

 ReactDOM.render(
  <h1>안녕하세요!</h1>,
  document.getElementById('루트')
);

React는 특정 프로젝트 구조를 적용하지 않고 요소를 렌더링하는 UI 라이브러리로 사용할 수 있으며 이것이 엄격하게 프레임워크가 아닌 이유입니다.

React Elements는 React 앱의 가장 작은 빌딩 블록입니다. React DOM은 무언가가 변경될 때마다 이를 효율적으로 업데이트하기 때문에 DOM 요소보다 더 강력합니다.

구성 요소는 응용 프로그램 전체에서 사용할 독립적이고 재사용 가능한 부분을 정의하는 더 큰 빌딩 블록입니다. props라는 입력을 수락하고 사용자에게 표시되는 요소를 생성합니다.

React는 JavaScript를 기반으로 하지만 HTML과 JavaScript를 동시에 포함하는 요소를 만들 수 있는 구문 확장인 JSX(JavaScript XML)와 대부분 결합됩니다.

JSX로 만드는 모든 것은 React JavaScript API로도 만들 수 있지만 대부분의 개발자는 JSX가 더 직관적이기 때문에 선호합니다.

뷰

Vue.js 코어 라이브러리는 View 레이어에만 초점을 맞춥니다. Vue Router 또는 Vuex와 같은 공식 및 타사 패키지로 기능을 확장하여 실제 프레임워크로 전환할 수 있기 때문에 프로그레시브 프레임워크라고 합니다.

Vue가 MVVM(Model-View-ViewModel) 패턴과 엄격하게 연관되어 있지는 않지만 Vue의 디자인은 부분적으로 영감을 받았습니다. Vue를 사용하면 프레임워크가 최신 보기를 렌더링할 수 있는 방식으로 애플리케이션 데이터가 처리되도록 하기 위해 대부분 ViewModel 계층에서 작업하게 됩니다.

Vue의 템플릿 구문을 사용하면 View 구성 요소를 만들 수 있으며 친숙한 HTML과 특수 지시문 및 기능을 결합합니다. 원시 JavaScript 및 JSX도 지원되지만 이 템플릿 구문이 선호됩니다.

Vue의 구성 요소는 작고 독립적이며 애플리케이션 전체에서 재사용할 수 있습니다. 확장자가 .vue 인 단일 파일 구성 요소(SFC)에는 HTML, CSS 및 JavaScript가 포함되어 있어 모든 관련 코드가 하나의 파일에 있습니다.

SFC는 Vue.js 프로젝트, 특히 더 큰 프로젝트에서 코드를 구성하는 데 권장되는 방법입니다. Webpack 또는 Browserify와 같은 도구는 SFC를 작동하는 JavaScript 코드로 변환하는 데 필요합니다.

모난

이 기사에서는 현재 AngularJS로 알려진 프레임워크의 첫 번째 버전이 아니라 Angular 2에 대해 설명합니다.

원래 프레임워크인 AngularJS는 MVC(Model-View-Controller) 프레임워크입니다. 그러나 Angular 2에서는 컴포넌트 기반이기 때문에 MV* 패턴과의 엄격한 연관이 없습니다.

Angular의 프로젝트는 모듈, 구성 요소 및 서비스로 구성됩니다. 각 Angular 응용 프로그램에는 하나 이상의 루트 구성 요소와 하나의 루트 모듈이 있습니다.

Angular의 각 구성 요소에는 템플릿, 응용 프로그램 논리를 정의하는 클래스 및 MetaData(데코레이터)가 포함됩니다. 구성 요소의 메타데이터는 Angular가 뷰를 만들고 표시하는 데 필요한 빌딩 블록을 찾을 위치를 알려줍니다.

Angular 템플릿은 HTML로 작성되지만 특히 반응 데이터를 출력하고 여러 요소를 렌더링하는 특수 지시문과 함께 Angular 템플릿 구문을 포함할 수도 있습니다.

Angular의 서비스는 구성 요소에서 데이터 가져오기 또는 입력 유효성 검사와 같은 비즈니스 논리 작업을 위임하는 데 사용됩니다. 그것들은 Angular 애플리케이션의 별개의 부분입니다. Angular는 사용을 강제하지 않지만 재사용할 수 있는 별개의 서비스 세트로 앱을 구성하는 것이 좋습니다.

Angular는 TypeScript로 제작되었으므로 가장 원활한 경험을 위해 사용하는 것이 좋지만 일반 JavaScript도 지원됩니다.

생태계

오픈 소스 패키지는 애플리케이션을 개발할 때 소중한 시간을 절약해 줍니다. 뿐만 아니라 전투 테스트를 거쳤기 때문에 주문 제작 구성 요소 및 패키지보다 나은 경우가 많습니다.

새 기능을 더 쉽게 생성하는 데 도움이 되는 바로 사용할 수 있는 구성 요소, 테마 및 기타 도구의 가용성을 확인하는 것이 중요합니다.

반응

많은 프런트 엔드 응용 프로그램은 로그인한 사람 및 기타 사용자 설정과 같은 정보를 저장하기 위해 전역 상태 관리에 의존합니다.

JavaScript 상태 관리를 위한 가장 인기 있는 프로젝트는 Redux입니다. 대부분의 개발자는 Redux 팀에서 유지 관리하는 Redux에 대한 공식 React 바인딩을 사용합니다.

React의 인기로 인해 입력 구성 요소와 바로 사용할 수 있는 요소를 찾는 것이 매우 쉽습니다. 모두 Google 또는 GitHub에서 검색할 수 있습니다.

또한 React 에코시스템에는 React로 작성된 단일 코드베이스에서 기본 iOS 및 Android 애플리케이션을 빌드할 수 있는 React Native가 포함되어 있습니다. 따라서 React는 웹 기술을 사용하여 모바일 애플리케이션을 구축하는 데도 훌륭한 선택이 될 수 있습니다.

React는 MongoDB, ExpressJS, React 및 NodeJS를 포함하는 MERN 스택의 일부입니다. 이 조합의 가장 큰 장점은 단일 언어(JavaScript)가 전체 애플리케이션을 구동한다는 것입니다.

뷰

Redux는 Vue에서 사용할 수 있지만 공식적인 바인딩은 없습니다. 그러나 Vuex는 Vue 애플리케이션을 위해 특별히 제작된 공식 상태 관리 라이브러리이기 때문에 걱정할 필요가 없습니다. Vue와 매우 잘 통합되는 것 외에도 Vue의 개발자 도구를 사용하여 쉽게 디버깅할 수 있습니다.

Vue 초기에는 바로 사용할 수 있는 구성 요소를 찾기가 더 어려웠습니다. 커뮤니티가 성장했기 때문에 개발 속도를 높이는 데 사용할 수 있는 다양한 입력 구성 요소와 고급 요소가 있습니다.

모바일 앱 개발을 위해 Weex라는 새로운 프로젝트가 있습니다. Weex는 Alibaba에서 개발하고 사용하지만 React Native만큼 성숙하고 강력하지는 않습니다. 게다가 프로젝트가 중국에서 더 많이 개발되고 사용되기 때문에 영어로 된 문제에 대한 문서와 솔루션을 찾기가 더 어렵습니다.

Vue는 Laravel과 잘 통합되므로 종종 함께 사용됩니다. Laravel은 새로운 프로젝트에서 Vue를 사용할 수 있도록 완전한 JavaScript 및 CSS 스캐폴딩을 제공합니다.

모난

Angular의 상태 관리를 위해 NgRx 프로젝트를 사용할 수 있습니다. Redux에서 영감을 얻었지만 Angular를 위해 특별히 제작되었습니다.

Vue 및 React의 경우와 마찬가지로 프로젝트로 가져올 수 있는 즉시 사용 가능한 구성 요소가 많이 있습니다. Angular에서 약간 다른 점은 Angular Material 프로젝트에 많은 공식 구성 요소가 있다는 것입니다. 이것은 Angular 애플리케이션을 위한 Material Design 구성 요소를 제공하는 Google의 공식 프로젝트입니다.

NativeScript를 사용하여 Angular에서 플랫폼 간 모바일 애플리케이션을 빌드할 수 있습니다. Vue도 지원하지만 Angular 지원은 더 성숙합니다.

Angular는 Angular와 MongoDB, ExpressJS 및 NodeJS를 결합한 잘 알려진 MEAN 스택의 일부입니다. MERN 스택과 유사하게 프론트엔드와 백엔드 모두에 대해 전적으로 JavaScript에 의존합니다.

공통 기술

Angular, React 및 Vue는 모두 PWA라고도 하는 프로그레시브 웹 앱을 개발하는 데 사용할 수 있습니다.

PWA는 모바일 애플리케이션이 아니라 스마트폰 사용자가 홈 화면에 바로 가기로 추가하고 기본 모바일 앱과 유사한 모양과 느낌을 제공할 수 있는 웹 애플리케이션입니다.

각 프레임워크에 대한 프리미엄 템플릿과 미리 만들어진 애플리케이션도 찾을 수 있지만 Angular와 React는 Vue보다 더 많은 프리미엄 옵션을 사용할 수 있습니다.

성능

프레임워크나 라이브러리를 선택할 때 성능도 고려해야 합니다.

많은 경우, 특히 소규모 프로젝트를 구축하는 경우 성능에 대해 걱정할 필요가 없습니다. 그러나 프로젝트의 범위와 복잡성이 커질수록 성능이 문제가 될 수 있습니다.

웹 성능과 관련하여 개발 품질과 모범 사례를 따르는 것이 프레임워크 선택보다 더 중요하다는 점에 유의하는 것이 중요합니다.

그러나 몇 가지 성능 메트릭과 차이점이 있으므로 이를 살펴보고 각각이 개발 노력에 어떤 영향을 미칠 수 있는지 설명하겠습니다.

JS 프레임워크 벤치마크: Angular vs React vs Vue

JS Framework Benchmark의 결과는 테이블에 행을 생성하거나 추가하는 것과 같은 대부분의 벤치마크에서 모두 매우 잘 수행됨을 보여줍니다.

위에서 볼 수 있듯이 Vue는 행 선택에서 Angular 및 React보다 상당히 느립니다. 반면에 Angular와 React는 행을 교환하는 데 그다지 효율적이지 않습니다.

이것은 렌더링 벤치마크의 유일한 실질적인 차이점이며 대부분의 경우 눈에 띄는 결과를 생성하지 않습니다. 행 선택은 행 교환보다 더 일반적인 기능이기 때문에 이 벤치마크는 Vue를 Angular 및 React에 이어 상위 위치를 공유하는 3위에 두었다고 말하고 싶습니다.

메모리와 부팅 시간에 관해서는 React와 Vue가 매우 좋은 점수를 받지만 Angular는 약간 느립니다. Angular는 기본 스크립트를 부팅하는 데 150ms가 걸릴 수 있으며 실행하는 데 더 많은 메모리가 필요합니다.

성능 추적: Angular 대 React 대 Vue

Google Chrome Labs의 Perf Track은 수천 개의 웹사이트에서 생산된 데이터를 보여줍니다. 이러한 통계는 선택의 틀뿐만 아니라 숫자를 살펴보겠습니다.

첫 번째 콘텐츠가 있는 페인트

Vue 및 React 웹 사이트는 부팅하고 사용자에게 콘텐츠를 표시하는 데 더 많은 시간이 소요될 수 있는 Angular와 비교하여 이 지표에서 더 높은 순위를 기록합니다.

가장 큰 콘텐츠가 있는 페인트

Angular는 또한 전체 페이지를 렌더링하는 데 있어 세 가지 프레임워크 중 가장 느립니다. Angular 웹사이트의 27%만이 허용 가능한 범위에 속합니다.

첫 번째 입력 지연

세 가지 프레임워크 모두에서 웹 사이트의 80% 이상이 첫 번째 입력 지연에 대해 허용 가능한 범위에 있으며, 이는 사용자가 페이지와 상호 작용할 수 있을 때까지 걸리는 시간을 보여줍니다.

자바스크립트 바이트

가장 가벼운 애플리케이션은 단연 Vue로 개발된 애플리케이션이며 Vue 앱의 68%가 1MB 미만의 JavaScript를 로드합니다. 반면에 Angular 및 React 애플리케이션은 코드 크기가 더 큰 경향이 있습니다.

이러한 지표를 사용하는 방법

이 수치에서 추세를 볼 수 있지만 너무 빨리 결론을 내리면 안 됩니다. 예를 들어 마지막 그림의 경우 Vue는 더 가벼운 응용 프로그램을 개발하는 데 사용되는 반면 Angular는 더 큰 프로젝트에 사용된다는 설명이 될 수 있습니다.

통계는 올바른 결정을 내리는 데 도움이 될 수 있지만 한 프레임워크가 다른 프레임워크보다 더 빠르거나 더 낫다는 것을 증명하는 데 사용할 수는 없습니다.

고급 기능

고급 응용 프로그램의 경우 사용 중인 프런트 엔드 프레임워크는 성능을 개선하고 확장할 수 있는 몇 가지 작업을 수행할 수 있어야 합니다.

핵심적인 두 가지 기술은 서버 측 렌더링(SSR)과 가상화입니다.

반응

React는 공식 ReactDOMServer 패키지로 서버 측 렌더링을 지원합니다. 가상화의 경우 React Virtualized라는 널리 사용되는 타사 도구를 사용할 수 있습니다.

뷰

서버 측 렌더링은 공식 SSR 패키지와 함께 Vue에서도 지원됩니다. 또한 Vue 위에 구축되고 SSR을 지원하는 Nuxt.js 프레임워크를 사용할 수도 있습니다.

불행히도 Vue의 가상화 옵션은 그렇게 강력하지 않습니다. 내 생각에 Vue Virtual Scroll List는 가상 스크롤을 위한 최고의 솔루션이지만 약간 버그가 있고 React 및 Angular에 대한 옵션만큼 안정적이지 않습니다.

모난

Angular에는 SSR용 공식 Angular Universal 패키지와 가상 스크롤 및 대용량 목록의 효율적인 렌더링을 위한 공식 구성 요소가 있습니다.

학습 곡선

이러한 각 프레임워크를 배우는 것이 얼마나 쉽습니까?

이 질문에 답하기 위해 우리는 각 프레임워크의 복잡성과 그들이 도입하는 개념을 살펴볼 필요가 있습니다.

반응

가장 기본적인 사용 사례에서 React는 세 가지 프레임워크 중 가장 덜 복잡합니다. 라이브러리를 가져오기만 하면 몇 줄의 코드로 React 애플리케이션 작성을 시작할 수 있기 때문입니다.

그러나 Hello World 예제를 제외하고 대부분의 React 애플리케이션은 구성 요소 기반이며 페이지의 몇 가지 요소만 렌더링하지 않습니다.

일부 개발자가 React에 대해 이상하거나 어렵다고 생각하는 한 가지는 JSX를 배우는 것이 일방통행이라는 사실입니다. 원시 JavaScript도 사용할 수 있지만 대부분의 React 개발자는 JSX를 사용하기 때문에 배우는 것은 거의 피할 수 없습니다.

이것이 React의 학습 곡선을 조금 더 가파르게 만들 수 있는 주요 사항이지만, 그 외에는 JavaScript를 알고 웹 개발 개념을 이해하는 개발자에게 배우기 쉬운 라이브러리입니다.

뷰

Vue는 React보다 설정하기가 조금 더 복잡합니다. 이를 라이브러리로 사용하여 HTML 전체에서 사용할 수 있는 구성 요소를 정의할 수 있습니다. 그러나 React와 마찬가지로 대부분의 프로젝트가 빌드되는 방식이 아닙니다.

대부분의 Vue 프로젝트에는 App.vue 라는 루트 구성 요소와 다양한 것을 표시하기 위한 여러 하위 구성 요소가 있습니다.

구문과 관련하여 새로 배워야 할 유일한 것은 Vue의 템플릿 구문으로, HTML을 안다면 매우 쉽게 이해할 수 있습니다. 조건부 렌더링 및 목록 렌더링을 위한 v-if 및 v-for 와 같은 기본 지시문은 초보자도 쉽게 이해할 수 있습니다.

또한 Vue의 단일 파일 구성 요소는 모든 프런트 엔드 코드를 한 곳에 보관하므로 새 프로젝트를 쉽게 구성할 수 있습니다.

Vue는 단순하고 직관적인 구문 때문에 가장 배우기 쉬운 것 같아요.

모난

Angular는 세 가지 중 가장 복잡한 프로젝트 구조를 가지고 있으며 전면적인 프론트엔드 프레임워크이기 때문에 더 많은 개념에 의존합니다.

구성 요소 외에도 Angular는 모듈과 서비스를 지원합니다. 프로젝트가 확장될 때 프로젝트를 보다 쉽게 유지 관리할 수 있도록 특정 방식으로 코드베이스를 작성하고 설계할 것으로 기대합니다.

구문의 경우 Angular는 TypeScript와 가장 잘 작동하므로 Angular 프로젝트를 빌드할 때 TypeScript를 아는 것이 중요합니다.

Vue와 마찬가지로 HTML과 유사한 구문에 익숙해져야 Angular로 새로운 UI 기능을 코딩할 수 있습니다.

제 생각에 Angular는 더 복잡하고 TypeScript에 의존하기 때문에 일반 개발자에게 가장 배우기 어렵습니다.

미래 예측

많은 오픈 소스 프로젝트와 프레임워크는 잊혀지고 유지 관리되지 않게 됩니다. 여기서 논의하고 있는 프레임워크에 대해 걱정해야 합니까?

무슨 일이 일어날지 완전히 예측할 수는 없지만 진행 중인 개발 작업은 이러한 프로젝트의 상태를 나타내는 좋은 지표입니다. 인기도와 성장도 프로젝트의 수명을 예측하는 중요한 지표이므로 각 프레임워크를 살펴보겠습니다.

반응

React v17.0이 출시되었지만 놀랍게도 개발자를 위한 새로운 기능은 포함되어 있지 않습니다.

주요 변경 사항은 이 새 버전을 통해 React 자체를 더 쉽게 업그레이드할 수 있다는 것입니다. 전체 프로젝트를 업그레이드할 필요 없이 React의 일부만 이전 버전에서 새 버전으로 업그레이드할 수 있습니다.

애플리케이션이 새 버전에서 변경되거나 더 이상 사용되지 않는 기능에 의존하는 경우 이 기능을 유지하기 위해 이전 버전을 유지할 수 있습니다. 이 업데이트를 통해 React는 새 버전을 쉽게 최신 상태로 유지할 수 있기 때문에 장기적으로 훌륭한 선택이 될 것입니다.

React는 주간 npm 다운로드에서 작년 이후로 44% 성장했습니다. 절대적인 수치로는 여전히 세 가지 프로젝트 중 가장 많이 다운로드되었습니다.

뷰

Vue 3는 2020년 9월에 출시되었으며 Vue 2가 대규모 프로젝트에서 가지고 있는 많은 심각한 문제를 해결합니다. React Hooks에서 영감을 얻은 Composition API를 도입하여 구성 요소 간에 로직을 더 쉽게 재사용할 수 있습니다.

전체 프로젝트가 TypeScript로 다시 작성되어 새로운 Vue 프로젝트에서 TypeScript 지원이 향상되는 동시에 프로젝트를 보다 쉽게 유지 관리할 수 있습니다.

Vue 3는 꼭 필요한 업그레이드이며 Vue를 대규모 프로젝트에 더 적합하게 만듭니다.

Vue의 주간 다운로드는 작년 이후로 87% 증가하여 Vue를 상대적 측면에서 가장 빠르게 성장하는 프레임워크로 만들었습니다. Vue가 이 성장률을 유지할 수 있다면 곧 Angular를 능가할 것입니다.

모난

Angular는 최근 Ivy Compiler를 도입했습니다. 빌드 시간을 단축하고 자산을 최적화하며 더 빠른 테스트를 허용하고 일반적으로 개발자 경험을 개선합니다.

Angular 팀은 1년에 여러 번 주요 업데이트를 릴리스합니다. 여기에는 새로운 기능이 포함되거나 새 브라우저 버전으로 프레임워크의 속도를 높일 수 있습니다.

Angular는 작년 이후 주간 다운로드가 약 50% 증가하여 여전히 인기 있는 프로젝트입니다.

결론

Angular, React 및 Vue는 모두 매우 활발히 개발되고 있습니다. 그들은 정기적으로 새 버전을 출시하고 기존 버전을 유지합니다. 현재 지원 수준이 각각의 경우에 높기 때문에 이러한 프레임워크를 안전하게 사용할 수 있습니다.

Angular는 이전만큼 빠르게 성장하지 않는 반면 Vue는 더 최근에 시작되었지만 많이 성장하는 것 같습니다.

이전에 언급했듯이 장기적으로 어떤 프레임워크가 관련성이 유지될지 예측할 수는 없지만 각 프로젝트에는 이를 기반으로 하는 훌륭한 커뮤니티가 있으며 지속적으로 발전하고 있습니다.

이 기사의 목표는 아키텍처의 차이점을 설명하고, 각 프레임워크의 강점과 약점을 분석하고, 적용 가능한 곳에서 비교하는 것이었습니다.

새로운 프레임워크로 뛰어들기 전에 고려해야 할 몇 가지 사항이 있습니다.

첫째, 팀의 경험이 새로운 기술을 선택할 때 결정적인 요소가 될 수 있습니다.

마찬가지로, 프로젝트를 위해 개발자를 고용할 수 있도록 해당 지역에서 사용할 수 있는 재능을 고려해야 합니다.

마지막으로 프로젝트 자체의 경우 복잡성과 범위도 프레임워크 선택에 영향을 줄 수 있습니다.

모든 주요 차이점을 고려하여 목표와 요구 사항에 가장 적합한 프런트 엔드 프레임워크를 결정할 수 있기를 바랍니다.