이 전 내용은 React와 Vue.js-1을 참고하세요.
성능
아래는 Vue.js 공식 사이트의 프레임워크 비교 글에서 발췌했습니다.
React 와 Vue 모두 비슷하게 빠르므로 속도는 선택에 있어 결정적인 요인이 되지 않을 것입니다. 특정 측정 항목에 대해서는 매우 간단한 컴포넌트 트리를 사용하여 원시 렌더링/업데이트 성능에 초점을 맞추는 써드파티 벤치 마크를 확인하십시오.
렌더링 성능
UI를 렌더링 할 때 일반적으로 DOM을 조작하는 것이 가장 비용이 많이 드는 작업이며 유감스럽게도 라이브러리는 이러한 원시 작업을 더 빠르게 만들 수 없습니다. 우리가 할 수 있는 최선의 방법은 다음과 같습니다.
- 필요한 DOM 조작 수를 최소화합니다. React 와 Vue는 모두 가상 DOM 추상화를 사용하여 이 작업을 수행하며 두가지 구현 모두 거의 동일하게 작동합니다.
- DOM 조작에 가능한 적은 오버헤드(순수 JavaScript 계산)만 가합니다. 이 것은 Vue와 React의 차이입니다.
JavaScript의 오버헤드는 필요한 DOM 작업을 계산하는 메커니즘과 직접적으로 관련이 있습니다. Vue 와 React 모두 가상 DOM을 사용하여 이를 구현하지만 Vue의 가상 DOM 구현은 훨씬 가벼우므로 React보다 더 적은 오버 헤드가 발생합니다.
아래는 2014년 MacBook Air의 Chrome 52에서 실행된 숫자입니다. 체리 피킹을 피하기 위해 두 벤치 마크는 실제로 20번의 별도 시간에 실행되었으며 아래에 포함된 최상의 실행 결과가 있습니다.
갱신 성능
React에서는 컴포넌트의 상태가 변경되면 해당 컴포넌트에서 루트로 시작하여 전체 컴포넌트 하위 트리를 다시 렌더링합니다. 불필요한 자식 컴포넌트의 재 렌더링을 피하려면 어디에서나 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 합니다. Vue에서 컴포넌트의 종속성은 렌더링 중 자동으로 추적되므로 시스템은 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고 있습니다.
즉 최적화되지 않은 Vue의 업데이트는 최적화되지 않은 React보다 훨씬 빠르며 실제로 Vue의 렌더링 성능이 향상되므로 완전히 최적화 된 React도 보통 Vue가 기본 제공되는 것보다 느립니다.
Component 와 CSS
React의 component
React의 component는 기본적으로 state, props가 변경될 때 렌더링이 되지만 stateless functional components를 통해 render가 되지 않는 component를 간단하게 구현도 가능하다.
Stateful component
Stateful 컴포넌트는 항상 클래스 컴포넌트이다. constructor에서 state를 초기화시켰고 render함수에서 state를 사용했다. 어떠한 액션이 있을 때 state 값을 변경시키는 코드가 추가될 수 있겠다. 만약 위 코드에서 text라는 state가 항상 ‘world’ 라는 문자열을 갖는다면 굳이 state가 필요없다.
Stateless component
위의 예처럼 constructor 와 text 라는 state 도 지웠다. 항상 ‘Hello world’가 있는 div 태그를 갖는 컴포넌트이다. 위의 예제는 함수형 컴포넌트를 이용하여 더욱 간단하게 만들 수 있다.
import 구문을 제외하고 단 3줄로 줄일 수 있다.
React CSS 적용 방법
React 에서 CSS 를 적용하는 방법엔 몇가지 방식이 있다.
- inline-style 속성 사용
- CSS 파일 사용 (의존 모듈 설치 및 세팅 필요)
- styled-components 사용
Vue의 component
Vue.js를 시험해볼 수 있는 가장 쉬운 방법은 아래처럼 script 를 포함하여 Vue 객체를 생성하는 방식이다.
이 외에도 .Vue라는 파일에 template, script, style을 간단하게 구현할 수 있다.
한 파일에 html, script, style을 모두 구현할 수 있으니 기존에 .css 파일이 독립적으로 나뉘어졌던 것과 달리 모듈 단위로 관리할 수 있다. 이 점이 React와의 차이점이자 Vue.js의 장점이라고 생각된다. (Vue를 좋아하는 개발자들이 React와 비교하여 장점으로 꼽는 것중 하나이다.)
추가적인 내용은 3편을 참고하세요.
