React js VS Vue js

React vs Vue

 

 Javascript는 React JS, Vue Js와 같은 프레임워크 및 라이브러리를 사용하여 웹 애플리케이션 개발을 도와줍니다. 의심할 여지 없이 우리시대의 가장 유용하고 인기있는 툴이며, 특히 더 높은 성과와 쉬운 학습을 제공하는 것으로 알려져 있습니다.

 편의상 두 프레임워크라 지칭하겠습니다. 두 프레임워크 모두 UI디자인에 광범위하게 사용되며 반응성, 가상DOM모델 및 컴포넌트 기반 구조에서도 공통적인 모습을 보이고 있습니다. 비슷한듯 서로 다른 두가지의 언어를 비교함으로서, 추후에 진행할 프로젝트에 적합한 언어를 선택하는데 도움이 되길 바랍니다.

 

 

React JS                                                                                                               

React JS의 특징

l  Single Page Application 과 Mobile App 개발에 사용 (= Cross-platform)

l  방대한 JavaScript Library

l  서버사이드 렌더링(SSR)을 지원하기 때문에 검색엔진 최적화(SEO)가 용이

l  단방향 데이터흐름을 지향해 관리하기 쉬운 애플리케이션을 만들 수 있다.

l  Chrome Extension의 활용으로 손쉬운 Debuging이 가능

l  가상 DOM

-       가상 트리 형태의 자료구조에 실제 DOM 트리가 매핑 된 형태로 동작

-       가상 DOM내의 변경사항을 추적하여, 매핑 된 실제 DOM상의 특정요소만 업데이트

-       DOM의 렌더링 횟수를 줄임으로써, 빠른 렌더링이 가능

l  JSX

-       자바스크립트 문법과 HTML태그가 혼용되어 사용되는 방식이다.

-       HTML친화적이라 어렵지 않게 작성이 가능하며, 마크업과 로직을 분리하지 않고 UI 작성이 가능

-       또한 React 컴파일 과정에서 에러를 감지할 수 있다.

l  컴포넌트 기반 구조로 확장이 용이

-       React JS는 서로 다른 모듈 구조와 함께 대규모 프로젝트에서 컴포넌트 구조로 사용된다.

-       크고 복잡한 웹시스템에서 복잡한 문제를 작게 나누어서 해결하기 용이하다.

-       컴포넌트 단위 코드작성으로 캡슐화(테스트 가용성, 신뢰성), 확장성, 결합성, 재사용 등의 이점

-       1000줄이상의 HTML코드 흐름을 이런 식으로 분기 가능하다

 

 

React JS의 단점

l  표준안이 없기 때문에 방대한 Library 사이에서 최선의 선택을 만들어가면서 프로젝트를 진행

l  필요한 기능을 위해 Library를 확장하기 때문에 계속해서 또다른 지식을 요구한다.

l  JSX를 처음 접하는 개발자들의 혼란과 필연적으로 가파른 러닝 커브

l  공식 Documentation의 전달력이 매우 낮다..

l  React 생태계의 이해도가 낮다면, 이미 구현된 Web App을 React로 셋업 하는데 어려움을 갖는다.

l  Full-featured Framework가 아닌 Library를 MVC framework에 통합하기위한 심층적인 지식이 요구됨

React JS Pros and Cons

 

 

 

 

Vue JS

Vue JS의 특징

l  Single-file Components

뷰를 구성하는 요소인 HTML, CSS, JS코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식

적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 수월한 협업을 도와준다.

l  가상 DOM 사용

l  단방향 / 양방향 데이터 바인딩 제공

l  상대적으로 가벼운 용량, 빠른 처리속도

l  문법이 단순하고 간결하여 러닝 커브가 낮고, 접근성이 높음

l  효율적인 Built-in plugins

l  공식 Documentation의 전달력이 높음

l  Template작성의 유연성(HTML, JS / JSX 다 사용 가능)

 

Vue JS의 단점

l  적은 수의 Plugin/Components

l  언어장벽 (Major개발자들이 대체로 중국 커뮤니티에 집중 되어있음)

l  업데이트 주기가 일정하지 않다.

l  Template의 특성상 Runtime Error가 나기 쉽고 테스트 하기 어려우며, 재 구조화가 쉽지 않다.

l  자체 Template을 사용하기 때문에, 큰 규모의 어플리케이션 개발에 문제를 겪을 수 있으며,  JS와의 직접 연계 측면에서도 불편함을 느낄 수 있다.

l  필요이상의 유연성으로 프로젝트가 더 복잡해 지거나 더 많은 에러를 생산한다. 이러한 현상은 개발비용의 증가와 프로젝트 딜레이 등을 가져온다.

 

Vue JS Pros and Cons

 

 

Vue JS와 React JS의 공통점

l  Opensource이며, Frontend-user Interfaces 개발에 사용되고있다

l  가상DOM으로 빠른 렌더링 보장

l  반응성의 컴포넌트 기반 구조

l  Server-side Rendering 지원

l  Router, Bundler, State management와 결합이 쉬움

 

Vue JS와 React JS의 차이점

대상    내용	React JS	Vue JS
구조	Library	Framework
Cross-platform dev	이미 발전된 React Native	여전히 진화중인 Vue weex
Bootstrap Application	CRA(Create React App)	Vue-cli
생태계	상대적으로 큼	상대적으로 작음
Code 재사용 여부	Only CSS	CSS & HTML
문법	JSX/JavaScript 기반 개발	HTML 기반 Template구문 개발
업데이트 주기 (2019년 기준)	주기적인 업데이트 30일 ~ 60일 (연 15회)	간헐적인 업데이트 10일 ~ 240일 (연 16회)
사용중인 기업	Paypal, Uber, Netflix, Airbnb etc.	Expedia, Alibaba, Xiaomi etc.

 

l  CSS 형식

 

-      React 또한 컴포넌트 내부 Style 정의가 가능하지만, CRA로 생성된 프로젝트 형식으로 작성

l  컴포넌트의 형태

 

●   데이터 컴포넌트 전달방식

-      초기화한 데이터를 컴포넌트에 전달하는 것은 매우 유사하다. 하지만 두 프레임워크에서 이 데이터를 변경하는 방법은 다르다.

 

●   Update data

- Vue는 데이터 객체를 생성한 후에 data를 자유롭게 Update할 수 있다.

- React는 state 객체를 만들고 Update를 하려면 조금 더 많은 작업(state를 조작하기 위한)을 수행해야 한다.

 

 

결론

React와 Vue는 유사한 점이 많으면서도 각기 다른 특징이 있어 동일 선상에서 비교하는 것보다 비즈니스와 개발 환경에 적합한 프레임 워크를 선택하는 것이 가장 좋다. Vue JS는 Framework 인데 반해, React JS는 Library기반 언어로 표준안이 없기 때문에 방대한 Library 사이에서 최선의 선택으로 만들어가면서 프로젝트를 진행해야 하는 주된 차이점 이외에도 여러가지의 개발 환경이 있을것이다. React JS가 적합한 상황과, Vue JS가 적합한 상황으로 나누어 결론을 마무리 지으려 한다.

 

Vue JS가 React JS보다 적합한 상황

l  빠르고 경량의 앱이 요구될 때

React와 Vue 모두 가상DOM을 만들어 state가 변할 때 실제 DOM과 일치시킨다. Vue의 렌더링 시스템이 React보다 빠르다는 걸 Vue에서 아래와 같이 증명했다.

Vue가 진행한 테스트(1 만개  Items를  100번 렌더링)

 

 

l  Templates 형식으로 애플리케이션을 제작하길 원할 때

Template은 전통적인 웹 개발 패러다임과 유사하므로 입문개발자가 이해하기 쉽다. Vue앱에서는 HTML파일에 마크업을 작성하는게 기본 설정이다. 콧수염 괄호{{ }}로 데이터를 바인딩하고, 표준 HTML태그 이외에 Directive라는 특별 HTML Attribute를 이용하여 Template의 기능을 확장 할 수 있다. 또한 HTML로 개발을 한다는 것은 개발자들에게 큰 이점이 될 것이다.

 

l  간단하고, 빠르게 Prototype을 확인하고 싶을 때

간단한 Vue프로젝트는 별도의 변환작업 없이도 브라우저에서 바로 작동이 된다. 이러한 부분이 jQuery처럼 쉽게 프로젝트에 적용할 수 있는 것이다. Vue에서는 state를 React보다 간단하게 변경할 수 있고 렌더링 시스템 또한 더 효율적이다.

 

React JS가 Vue JS보다 적합한 상황

 

l  대규모의 앱을 만들 때

Vue의 Template기반 개발은 앱의 규모가 점점 더 커질 때 기술 부채를 안겨준다. Template은 런타임 에러가 나오기 쉽고, 테스트 하기가 어려우며 재구조화 하기 어렵기 때문이다.

반대로 React는 JavaScript기반으로 개발하여 컴포넌트로 구성하기 쉽고, 재사용성이 높으며 테스트에 용이하다. 또한 React JS의 렌더링 시스템이 더 정밀한 구성이 가능하고, Shallow렌더링[1]과 같은 기능들을 갖고 있다. React에서 data의 불변 속성이 처음에는 복잡해 보일 수 있지만, 복잡한 규모의 앱에서는 테스트와 투명도 측면에서 빛을 발한다.

 

l  더 큰 개발 생태계를 원할 때

 (React JS와 Veu JS의 npm download 추이)

React가 가장 인기있는 라이브러리라는 사실은 부정할 수 없다. 인기가 많다는 건 단순한 인지도 측면 외에도, 더 많은 튜토리얼과 Stack Overflow의 더 많은 질의응답이 있다는 걸걸 의미한다. 더 많은 툴과 확장 라이브러리들이 존재하기 때문에 개발자가 쉽게 재사용할 수 있는 이득이 있다. 또한 Facebook에서 시작해서 유지보수 되어 오기 때문에 지속적인 버전업에 신뢰가 더 간다.

 

l  Cross-platform App개발을 염두 해 두었을 때

React Native는 발전되어 있고 Native-rendered-apps로 전세계에서 광범위하게 사용되고 있다. React로 구성된 사이트는 모바일로 포팅 하기 수월한 장점을 지니고있다. Web 뿐만 아니라 Mobile도 사업영역에 해당한다면, Cross-platform을 지원하는 React JS로의 개발이 더욱 이점을 발휘 할 것이다.