React 와 Vue 공통점
React와 Vue는 여러 공통점을 공유하는데,
-
가상 DOM을 활용합니다.
-
반응적이고 조합 가능한 컴포넌트를 제공합니다.
-
코어 라이브러리에만 집중하며, 라우팅 및 전역상태를 관리하는 컴패니언 라이브러리가 있습니다.
성능 분석 비교
지금까지 테스트한 모든 실제 시나리오에서 Vue는 React보다 훨씬 우수합니다.
[ 렌더링 성능 ]
UI를 렌더링하는 것은 일반적으로 DOM 조작이 가장 비용이 많이 드는 작업이며, 유감스럽게도 라이브러리에서는 이러한 원시 작업을 더 빠르게 만들 수 없습니다. 할 수 있는 최선의 방법은 다음과 같습니다.
-
필요한 DOM 조작 수를 최소화합니다. React와 Vue는 모두 가상의 DOM 추상화를 통해 이 작업을 수행하며 두 가지 구현 모두 거의 동일하게 작동합니다.
-
DOM 조작에 가능한 한 적은 오버헤드(순수 자바스크립트 계산)만 가합니다. 이것은 Vue와 React의 차이입니다. React에서 엘리먼트 렌더링에 대한 추가적인 오버헤드를 1이라 가정하고 평균적인 컴포넌트 오버헤드가 2라고 가정합니다. Vue에서는 엘리먼트의 오버헤드가 0.1 정도지만 반응 시스템에 필요한 설정 때문에 평균적인 컴포넌트 오버헤드는 4입니다.
즉, 렌더링되는 컴포넌트보다 더 많은 엘리먼트가 있는 일반적인 애플리케이션에서 Vue는 React보다 높은 성능 향상을 보입니다. 그러나 각 엘리먼트를 렌더링하기 위해 1개의 컴포넌트를 사용하는 매우 극한의 상황에서 Vue가 일반적으로 느립니다.
Vue와 React 모두 상태 또는 인스턴스 없는 함수형 컴포넌트를 제공하므로 오버헤드가 적습니다. 성능이 중요한 상황에서는 Vue가 더 빠릅니다.
[ 갱신 성능 ]
React에서는 완전히 최적화된 재렌더링을 위해서는 shouldComponentUpdate를 구현하고 불변 자료 구조를 사용해야 합니다. Vue는 컴포넌트의 의존성이 자동으로 추적되므로 해당 의존성 중 하나가 변경될 때만 갱신합니다. Vue에서 도움이 되는 추가적인 최적화로는 긴 리스트에 들어있는 항목에 키 속성을 추가하는 것이 있습니다.
즉, 최적화되지 않은 Vue의 갱신은 최적화되지 않은 React보다 훨씬 빠르며 심지어 완전히 최적화된 React도 기본으로 제공되는 Vue보다 느립니다.
[ 개발 시 성능 ]
배포 환경에서의 성능은 최종 사용자 경험과 직접적으로 관련돼 있으므로 당연히 중요한 부분이지만 개발 환경의 성능 또한 개발자와 관련돼 있으므로 여전히 중요합니다.
Vue와 React 모두 대부분의 일반적인 애플리케이션에서 속도가 빠릅니다. 그러나 프레임 속도가 높은 데이터 시각화 또는 애니메이션을 프로토타이핑할 때 Vue는 개발 시 초당 10프레임을 처리하는 반면 React는 초당 약 1프레임으로 떨어지는 경우를 경험했습니다.
이것은 React의 개발 모드에서는 갖가지 자세한 경고와 오류 메시지를 보여주는 검사를 수행하기 때문입니다.
출처 : 쉽고 빠르게 배우는 Vue.js2 프로그래밍 (위키북스)
