Web Programming

React와 Vue

안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다.

 

새로운 프로젝트를 시작하면서, 프론트엔드 영역에서 어떤 뷰 프레임워크를 사용하는 것이 좋을지 고민하게 됩니다.

 

이번 글에서는 많은 프레임워크 중, React, Vue에 대해 비교해 본 점들을 정리해 보겠습니다.

참고로 이전에 html, css, vanila JS(or jQuery)만을 이용해서 뷰를 개발했고, React와 Vue를 이용하여 튜토리얼 코드를 작성해 본 경험이 있는 상태에서 두 가지를 비교해 보았습니다.

 

시작하기 전에 참고로, The State of JS에서 Front-end Frameworks 메뉴에서 확인 할 수 있는 순위들입니다.

Satisfaction
Usage

(2022.05.12) '2-2. 패키지와 커뮤니티 크기' 에 내용이 추가되었습니다.

목차

1. React vs Vue (vs Angular?)

2. React와 Vue

    2-1. HTML Components를 생성하고 사용하는 방법

    2-2. 패키지와 커뮤니티 크기

    2-3. UI 라이브러리의 다양성

    2-4. 상태 관리 툴과 미들웨어 적용

    2-5. 자원 사용량과 퍼포먼스

    2-6. 테스트 코드 작성 이후, 결론

3. 다른 Web Front-end View Frameworks (혹은 Libraries)

 

1. React vs Vue (vs Angular?)

그전에, 온라인 코드 에디터에서 프로젝트를 생성했을 때 초기에 어떻게 구성하는지 궁금해서 하나씩 프로젝트를 생성해 봤습니다.

 

StackBlitz에서 각 프레임워크를 기반으로 한 프론트엔드 프로젝트를 만들기 전, 다음과 같은 화면을 볼 수 있는데,

 

Bootstrap5를 제외한 각 환경별로 프로젝트를 생성했을 때의 초기 파일구조와 dependancies는 아래와 같습니다.

이렇게만 보면 React와 Vue는 프로젝트가 엄청나게 가벼울 것 같지만, 실무에서 사용하기 위해서는 router와 상태 관리 라이브러리를 기본적으로 추가 설치해야 합니다.

 

아래는 공식 문서 등에서 안내하고 있는 각 프레임워크의 정보를 간단하게 정리한 테이블입니다.

  React Vue Angular
Current version (stable) 18.0.0 (2022-03-29) 3.2.33 (22-04-14) 3.2.33 (22-04-14)
Official site (KOR) ko.reactjs.org/ kr.vuejs.org (v2) angular.kr/
    vuejs.org/ (v3, ENG)  
Learning curve Low Low High (Someone say steep)
Accessibility 📎Docs 📎Docs 📎Docs
License MIT
Used by Facebook, Uber Alibaba, GitLab Google, Wix

 

참고로 작성일 기준 가장 최근 Google Trends에 세 프레임워크의 검색어에 대해 입력했을 때, 결과는 아래 이미지와 같이 나옵니다.

 

키워드를 포함하지 않는 관련 검색 빈도수까지 확인할 수는 없기 때문에, 각 키워드에 대한 웹 검색 빈도수로만 참고하시기 바랍니다.

 

2. React와 Vue

위에서 처음 시작은 React, Vue, Angular를 비교하고 있어서 이상하게 느껴지셨을 것도 같습니다. 처음에는 세가지를 비교하던 과정에서 Angular보다는 React, Vue에 치중해서 정보를 검색하다보니 두가지를 1:1로 비교하는 내용으로 정리하게 되었습니다.

프레임워크를 도입하기 전에 이미 ES6 이상의 JavaScript 문법에 이미 익숙해져 있는 상태였기 때문에 React 프로젝트를 시작해 보는 데에 부담이 적었습니다. 그렇기 때문에 TypeScript만을 사용해야 하는 Angular보다는 언어 선택에 자유도가 좀 더 있는 React와 Vue 두 가지를 중심으로 비교해 보았고,

  1. 코드 구조나 문법뿐만 아니라 상태 관리, 데이터 처리에 대한 프로세스에 익숙해지기까지 러닝 커브가 높지 않은지?
  2. 서비스 내 상태 관리보다 비동기 데이터 처리에 중점을 두고,
  3. TypeScript를 당장 사용하지 않더라도 추후 사용할 수 있는 등의 자유도가 있는지?

를 고려하며 비교하였습니다.

 

 

2-1. HTML Components를 생성하고 사용하는 방법

  React Vue
Grammer Based on JavaScript(ES6+) or TypeScript JavaScript(ES6+) and HTML
Can use TypeScript? O O
Virtual DOM O O
Component    
Styling Components CSS in JS, css file style tag, css file
SSR Official ReactDOMServer package Official SSR package or use the Nuxt.js
Routing React Router (third-party library) Vue Router (offiicial library)
Test library React Testing Library @testing-library/react View Test Utils @vue/test-utils

 

 

2-2. 패키지와 커뮤니티 크기

  React Vue
npmjs npm i react npm i vue
Weekly downloads 13.3m+ 2.2m+
Unpacked size 316 KB 2.53 MB
Total files 20 33
Minzipped size (KB) 2.5 33.9

참고: https://www.npmtrends.com/react-vs-vue

 

 

  React Vue
Github Repository facebook/react vuejs/vue
Stars 197k 195k
Wathers 6.6k 6.1k
Forks 38.4k 32k
Contributors 1500+ 400+
Used by 9.7m -

참고: https://star-history.com/#facebook/react&vuejs/vue

 

built with의 trends에서 React와 Vue를 찾아보았을 때의 결과는 아래와 같습니다.

(마지막 업데이트 2022.05.11 기준)

  React Vue
소개 A JavaScript library for building user interfaces from Facebook. vue.js a JavaScript MVVM framework.
Total Live We know of 10,418,340 live websites using React We know of 1,884,181 live websites using Vue.
South Korea Live Sites 9,079 3,007

 

2-3. UI 라이브러리의 다양성

  React Vue
Material Design System
(Google)		 Material UI (MUI), Vuetify,
Vue Material,
Vue Material Kit,
Carbon Design System
(IBM)		 Carbon, Carbon,
Fluent Design System
(Microsoft)		 Fluent UI,
FAST,		 FAST,
Vuent,
Bootstrap React Bootstap,
CoreUI,		 Bootstrap Vue,
CoreUI,
Others NextUI,
Ant Design,
Primer,
Feelix,
Gestalt,
Paste,
Evergreen,
Blueprint,
Rebass,
...		 Vuesax,
Keen UI,
Buefy,
Vux,
Element,
Quasar,
VueTailwind,
...

위에 적어놓은 라이브러리 이외에도, Fluent와 FAST처럼 Web Component를 제공하는 UI 라이브러리의 경우 마찬가지로 컴포넌트를 적용시킬 수도 있습니다.

 

 

2-4. 상태 관리 툴과 미들웨어 적용

  React Vue
State Management Tools Redux,
Recoil,
MobX,
Flux,
Zatoi,
Zustand		 Vuex,
Pinia
Example of using logger redux-logger with middleware applyer in redux Built-in Logger library in Vuex
Example of fetching data With redux-saga, we can stop all the before when request Make async component using defineAsyncComponent API

 

 

2-5. 자원 사용량과 퍼포먼스

마지막으로 아래 이미지들은 js-framework-benchmark에서 확인해 볼 수 있는 각 프레임워크들을 사용했을 때의 성능 비교 내용들입니다. 성능 비교의 기준 등의 자세한 내용은 해당 페이지의 내용을 참고하시기 바랍니다.

각 프레임워크(혹은 라이브러리)만 사용했을 때의 결과만 비교해 보면 간단하겠지만 react는 상태 관리 툴인 Redux와 함께 사용한 경우를 포함하여 비교하였기 때문에 살펴볼 프레임워크는 다음과 같습니다.

  • react-v17.0.2
  • react-redux-v17.0.1 + 7.2.1
  • vue-v3.2.26

시간(밀리초) ± 표준 편차, 왼쪽부터 페이지 로드 후 1000개의 줄을 생성하는 데 걸린 시간 기준으로 오름차순으로 정렬

 

Startup metrics (Lighthouse 모바일 시뮬레이션 측정 값), 왼쪽부터 모든 리소스가 페이지에 로드될 때의 네트워크 전송 비용 기준으로 오름차순으로 정렬

 

메모리 할당(MB) ± 표준 편차, 왼쪽부터 1000줄이 추가된 후의 메모리 사용량 기준으로 오름차순으로 정렬

 

Perf Track에서도 여러 프레임워크를 사용하여 제작된 웹 페이지의 Web Vitals 내용을 확인해 볼 수 있습니다. 위와 동일하게 Lighthouse와 WebPageTest의 데이터와 함께 HTTP Archive와 Chrome UX Report 데이터를 바탕으로 Web Vitals 내용을 보여주고 있습니다. 하지만 각 성능들을 나란히 놓고 비교하는 것이 아니라 각 프레임워크가 사용된 샘플에 대한 성능 정보를 보여주고 있을 뿐, 한눈에 비교하기는 어렵기 때문에 아래는 한 화면에 나란히 두고 비교해 본 이미지입니다.

 

 

2-6. 테스트 코드 작성 이후, 결론

추가로, 아래 표는 제가 테스트 코드를 작성해 보며 직접 사용했을 때 두드러지게 느껴지는 부분을 간단하게 정리하여 각 프레임워크를 사용하는 이유가 될 부분들을 표시하여 모아놓았습니다. 개발하고자 하는 프로젝트의 성격이나 이전에 자주 사용하는 언어가 무엇인가에 따라 다를 것이라고 생각하기 때문에 참고만 해주시기 바랍니다.

  React (v 18.x) Vue (v 3.x)
테스트 프로젝트 환경 webpack(^5.72.0) & babel(^7.17.x)과 함께 사용
react-router: ^6.2.1,
react-router-dom: ^6.2.1		 vue-router: ^4.0.14
react-redux: ^7.2.6,
redux: ^4.1.2,		 vuex: ^4.0.2
redux-logger: ^3.0.6, redux-saga: ^1.1.3, redux-thunk: ^2.4.1 -
  Learning curve가 낮은 편임.
  JavaScript 파일에 JSX와 CSS in JS를 통해 같은 문법으로 하나의 컴포넌트를 생성함. SFC의 경우 JavaScript, html, css 문법을 각각 사용하여 *.vue 확장자의 하나의 컴포넌트를 생성함.
  TypeScript를 사용하여 개발이 가능함.
  비동기로 데이터를 처리하는 action이 많이 발생하는 경우, Redux와 Redux middleware를 사용하여 데이터를 처리하는 과정에서 추가적인 작업을 하기 용이함. -
  Redux와 Redux middleware를 함께 사용 시, store와 action을 관리하는 것이 상대적으로 복잡함. Vuex 사용 시, store 관리가 상대적으로 간단하고 단순함.
  React를 사용하여 서비스가 실행 중인 케이스를 비교적 찾기 쉽고, React를 사용하거나 공부 혹은 개발하는 개발자들의 커뮤니티가 큼. Vue의 버전 업데이트에 따라 Vue Router, Vuex들의 업데이트가 함께 이루어지지만, 가장 최신의 버전을 기준(Vue: v3, Router: v4.x, Vuex: v4.x)으로 사용 중인 서비스를 찾기 상대적으로 어려움.

 

 

 

3. 다른 Web Front-end View Frameworks (혹은 Libraries)

 

참고한 자료

(2022.05.12 추가)

 

 

728x90
저작자표시 비영리 변경금지

'Web Programming' 카테고리의 다른 글

Promise 비동기 처리의 이해  (0) 2022.09.08
Sass 와 SCSS의 차이  (0) 2022.08.22
Vanilla JS에서 웹 컴포넌트 생성, 사용하기  (0) 2022.03.25
Front-end 노드와 링크로 구성된 네트워크 시각화 Vis.js 플러그인  (0) 2020.12.28
Adobe Illustration Working Level 2  (0) 2020.08.21