회사에 입사하기 전 유지보수로 Vue.js를 사용한다고 해 Vue.js에 대해 알아보고자 React와의 차이를 공부하게 되었다.

Vue와 React의 유사점

• 자바스크립트
  • Vue는 EMAScript 5와 6을 모두 사용하나 React는 ECMAScript 6에 집중한다.
  • 두 개다 모두 Javascript를 사용하기 때문에 React 및 Vue 개발자의 가용성은 문제가 되지 않는다.
• 타입스크립트
  • React와 Vue 모두 TypeScript와 데이터 흐름을 지원한다.
• 풍부한 프론트엔드 경험
  • 둘 다 환상적인 UI를 제공한다.
  • Javscript를 통해 사용자 경험을 지정하고 반응 앱을 만들 수 있다.
• 가상 DOM
  • 둘 다 과도한 DOM 활동을 제거해 속도를 높일 수 있는 Virtual DOM을 사용한다.
  • 이로 인해 가상 DOM 트리와 유사한 최소한의 Javascript 엔터티를 사용할 수 있다.
• 경량 구성 요소 기반 아키텍처
  • React와 Vue는 컴포넌트 기반 아키텍처를 가지며 빠르고 가볍다.
  • 평생 기능을 제공받아 지속적인 개선과 업데이트를 받는다.
  • 단일 페이지 애플리케이션이 아닌 서버 측 렌더링을 포함한 다양한 웹 애플리케이션에도 사용할 수 있다.
• 크고 활동적인 커뮤니티
  • 둘 다 상당한 규모의 활성된 커뮤니티를 가지고 있어 접근 가능한 도구와 리소스가 풍부하다.

Vue와 React의 차이점

• React는 라이브러리인 반면 Vue는 Javascript 프레임 워크이다.
  • 리액트는 자유도가 높고, 뷰는 기능이 이미 다 정해져있다.
• React는 자유도가 높고 Vue는 한 가지 방식대로 한다.
  • React는 자바스크립트 문법을 쓰고 싶은대로 사용이 가능하지만 Vue는 제공해주는 문법에 한해서만 구현이 가능하다.
• 데이터 흐름 라이브러리
  • 둘 다 서로 다른 데이터 흐름 라이브러리와 쌍을 이룬다.
  • React 데이터 흐름 라이브러리는 Redux 라고 하며 Vue 데이터 흐름 라이브러리는 Vuex로 이를 통해 상태 관리 유지를 조정한다.

Vue의 장점

• 사용 용이성
  • Vue.js의 구성 요소는 모든 HTML, CSS 및 Javascript 코드가 하나에 파일에 포함되는 단일 파일 컴포넌트이다.
  • 특정 기능을 담당하는 컴포넌트를 찾고 수정할 때 편리해 유지보수와 협업이 원활하다.
• 이해하기 쉬움
  • template style script의 싱글 파일 컴포넌트 구조로 개발하는 방식이 기존의 html css js로 나눠서 개발하던 방식과 유사해 러닝커브가 낮은 편이다.
  • Vue에서 제공하는 문법만 배우면 잘 동작하기 때문에 생산성이 빠르다.
• 손쉬운 통합
  • Vue.js로 개발된 애플리케이션에 특정 요구 사항을 충족시키기 위해 React를 도입하고 싶을 때, Vue와 React를 통합하여 필요한 변경을 빠르게 적용할 수 있다.
• 속도 이슈
  • React와 Vue의 속도는 매우 유사하지만 Vue가 조금 더 빠르다.
  • 그래서 속도 이슈에 민감한 코인 거래 사이트에서 Vue를 사용한다고 한다.

Vue의 단점

• 언어 장벽
  • Vue의 가장 큰 커뮤니티가 중국에 있어 특정 연구에 문제가 있을 수 있다.
  • Vue의 많은 모듈이 중국에서 만들어져 모국어 지침을 게시하기 때문에 영어만 구사하는 프로그래머에게는 어려울 수 있다.
• 구성 요소 및 플러그인 수 감소
  • Vue는 React에 비해 플러그인 및 프레임워크가 부족하다.
  • 중요한 것은 Vue에 포함되어 있으나 정확한 요구 사항으로 인해 적절한 라이브러리를 찾는데에는 문제가 있을 수 있다.
• 과도한 유연성은 위험을 초래한다.
  • Vue는 React보다 더 많은 구조와 가이드라인을 제공한다.
  • 하지만 이는 대규모 프로젝트에서는 코드 무결성에 문제가 있을 수 있다.
  • 이를 해결하고자 Vue 프로그래머는 시간을 소비해야한다.
• 타입스크립트의 결합성
  • 2.x 버전에서는 타입스크립트 지원이 완벽하지 않다.

React의 장점

• 재능있는 개발자를 쉽게 찾을 수 있다.
  • 시장이 작은 다른 기술에 비해 전문 분야를 갖춘 React 개발자를 찾는 것이 훨씬 쉽다.
• 광대한 커뮤니티
  • 강력한 커뮤니티의 지원을 받아 웹앱 개발 프로세스를 돕고 가속화한다.
  • 문제가 발생했따면 공개 플랫폼에 게시해 수만 명의 React 개발자가 이미 문제를 해결했을 가능성이 높다.
• 재사용 가능한 구성 요소
  • React는 모듈을 만들어 프로그램의 어느 위치에나 배치할 수 있다.
  • 이를 통해 작은 시각적 구성 요소를 결합해 더 광범위하고 복잡한 UI를 형성할 수 있다.
• 프로그래밍의 자유도
  • 자체적으로 지원해주는 기능이 제한적이고 개발자의 자유에 따라 개발할 수 있다.
  • 따라서 모든 상황에 대해서 대처하기에 더 유연할 수 있다.

React의 단점

• 개발 속도
  • React의 생태계는 지속적으로 발전하기 때문에 변경사항을 이해하고 파악하는 것이 복잡해진다.
• 장애물 역할을 하는 JSX
  • Javascript와 HTML을 혼합 가능한 문법인 JSX는 일부 개발자에게 학습 곡선이 약간 어렵게 느껴질 수 있다.
• 모든 것이 자바스크립트
  • JSX또한 js의 확장된 문법이며 css도 css파일을 분리해서 따로 만드는 방식 말고 한 파일에서 사용하려면 css-in-js로 결국 자바스크립트로 작성해야한다.
• 문법의 자유도
  • Vue는 지원해주는 문법에 한해서 개발하기 때문에 코드 스타일에 통일성이 생기지만 React는 자바스크립트의 문법을 개발자의 역량에 따라 자유롭게 사용하기 때문에 코딩 스타일을 통합하는데 커뮤니케이션 비용이 많이 든다.

성능

• Vue
  • 다양한 옵션이나 모듈 업데이트로 인해 Vue 프로그램의 상태가 더욱 모호해지며 이로 인해 앱을 빠르게 로드하기가 더욱 어려워진다.
  • Vue는 이를 가상 DOM을 통해 성능을 향상시키며 지연 로딩은 Vue의 가장 중요한 기능으로 로딩 시간 단축에 기여한다.
• React
  • React의 가상 DOM을 활용하여 효율적으로 UI를 업데이트하고 렌더링하여 사용자 경험을 향상시킨다.
  • React 앱은 더 빠르게 실행되고, 더 나은 사용자 경험을 제공하며 서로 잘 작동하는 별도의 요소를 가지고 있다.
  • React의 컴포넌트 기반 아키텍처는 보다 강력한 SPA를 만드는 데 도움이 된다.

확장성

• Vue
  • Vue CLI에는 애플리케이션을 빠르게 시작할 수 있는 기본 프레임워크가 포함되어 있으며 특정 요구사항이 변경될 경우 종속 항목만 수정하면 된다.
  • Vue는 HTML 구문을 사용하여 템플릿을 작성하므로 JSX와 같은 자바스크립트 확장 문법을 사용하지 않아 템플릿 재사용이 어렵다.
  • 또한 JSX를 사용하는 프레임워크나 라이브러리와 함께 사용하기 어렵다.
• React
  • 강력하고 활동적인 커뮤니티 덕분에 제공할 것이 많다.
  • 확장성이 뛰어난 애플리케이션을 개발하는 것이 훨씬 쉬워진다.
  • 사전 구축된 라우팅 솔루션이 포함되어 있지 않으며 타사 도구를 활용해야 한다.

React, Vue 누구에게 잘 맞을까

• Vue
  • 규모가 작고 가벼운 프로젝트를 만들고 싶다.
  • 속도 이슈에 매우 민감한 사이트다.
  • 자바스크립트 문법에 미숙하다.
  • 회사에 퍼블리셔가 따로 존재한다.
  • 기존 html css js 구조로 작성된 코드를 SPA로 옮기고 싶다.
  • 개발자간 코드 통일성을 위한 커뮤니케이션 비용을 줄이고 싶다.
  • 백엔드 개발자다.
• React
  • 프로젝트 규모가 크다. 점점 더 확장될 것이다.
  • 자바스크립트 문법에 능숙하다.
  • 컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 예정이다.
  • 커스터마이징 및 자유도가 높은 개발 환경을 좋아한다.
  • 타입스크립트를 사용할 것이다.
  • 넓은 커뮤니티 및 개발 인력시장의 혜택을 보고싶다.

마치며

• React만 배워서 Vue에 대해 몰랐는데 대략적으로나마 특징에 대해 알게 되었다. React에 대해서만 공부해 Vue를 무시하는 감이 있었지만 카카오에서도 Vue를 사용해 개발한다는 점과 러닝커브가 낮은 점, 속도가 미세하게 빠르다는 점이 Vue를 무시하지 못하게 하는 원인이 아닐까 싶다.

Reference

Vuejs vs React: Comparison of Two Most Popular Front-end JS Frameworks-Jamal Osman React vs Vue 장단점 비교 - 이하은