Vue와 React 공통점
첫째. 가상 DOM을 활용한다.
둘째. 반응적이고 조합가능한 컴포넌트를 제공한다
셋째. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 존재한다.
무엇이 다른가?
첫째. 런타임 퍼포먼스(속도)
기본적으로 React와 Vue는 속도가 비슷하다. 하지만 렌더링을 할 때 차이가 발생한다.
자바스크립트의 오버헤드는 필요한 DOM작업을 계산하는 메커니즘과 직접적으로 관련이 있다. Vue와 React 모두 가상 DOM을 사용하여 이를 구현하지만 Vue의 가상 DOM구현(snabbom의 포크)은 훨씬 가벼우므로 React보다 더 적은 오버헤드가 발생한다.
실제로 10,000개의 목록항목을 100번 렌더링하는 간단한 벤치마크 프로젝트를 실행했을 때, 중위값은
Vue가 45밀리초, React가 81밀리초로 Vue가 2배정도 빠르게 렌더링을 처리한다.
둘째. 갱신성능
React에서는 컴포넌트의 상태가 변경되면 해당 컴포넌트에서 루트로 시작하여 전체 컴포넌트 하위트리를 다시 렌더링한다. 불필요한 자식 컴포넌트의 재 렌더링을 피하려면 어디에서나 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 한다. Vue에서 컴포넌트의 종속성은 렌더링 중 자동으로 추적되므로 시스템을 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고 있다.
즉 최적화를 서로 구현하지 않았을 때 Vue가 React보다 빠르게 된다.
셋째. 프레임처리
데이터 시각화 또는 애니메이션을 프로토 타이핑을 할 때 Vue는 개발 시 초당 10프레임을 처리하는 반면 React는 초당 약 1프레임으로 Vue가 10배정도 우수한 퍼포먼스를 보여준다.
넷째. JSX vs Template
React에서 모든 컴포넌트는 자바스크립트에서 작동하는 선언적 XML 유사구문인 JSX를 사용해 렌더링 함수 안에서 UI를 표현한다.
Vue는 렌더링 함수에 JSX지원을 사용할 수 있지만 기본적으로 템플릿을 사용한다.
Vue템플릿은 플레인 HTML에 일부 문법이 추가된 형태이므로 HTML을 이해한다면, 사용이 쉽다. 컴포넌트는 표현형과 논리형으로 나눌 수 있는데, 템플릿은 표현형에 렌더링 함수와 JSX는 논리형 컴포넌트에 사용하는 것 이 좋다. 일반적으론 표현형 컴포넌트 형식이 많은 편이다.
출처 : https://kr.vuejs.org/v2/guide/comparison.html (Vue 공식문서 ㅋㅋ)
