Vue.js

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크!
웹 UI 개발(컴포넌트, 선언형 UI, 핫 리로딩, 타임 트래블 디버깅 등)의 아이디어를 더 접근 가능하도록 만드는데 초점을 둔다.

Vue의 장점:

• Template와 Render Function을 모두 사용할 수 있는 옵션
• 간편한 Syntax와 프로젝트 설정
• 빠른 렌더링과 더 작은 용량

React의 장점:

• 큰 규모에서 더 빛을 발하고, 테스팅이 수월
• Web과 Navtive 앱 개발에 모두 사용 가능
• 더 큰 개발자 생태계에서 오는 많은 레퍼런스와 도구들

두 라이브러리의 공통된 특장점:

• Virtual DOM으로 빠른 렌더링
• 경량 라이브러리
• Reactive Component
• Server Side Rendering
• 라우터, 번들러, State management와 결합이 쉬움
• 훌륭한 개발자 커뮤니티와 지원

Template와 Render Function을 모두 사용할 수 있는 옵션

Vue는 HTML 파일에 마크업을 작성하는게 기본이다.
Angular와 비슷하게 콧수염 괄호 {{}}를 사용해 데이터 바인딩을 하고, 표준 HTML 태그 이외에 Directive라는 특별 HTML Attribute를 이용해 Template의 기능을 확장 할 수 있다.

반면, React는 Template구조를 사용하지 않고, JSX를 사용해 자바스크립트에서 DOM을 생성한다.

따라서 Vue는 전통적인 웹 개발 패러다임과 유사하므로 진입장벽이 낮고 Functionaliy동작과 태그 Layout을 분리할 수 있어 선호되는 장점이 있다.

하지만, 리액트와 다르게 HTML구문을 학습해야한다는 단점이 있다.

💛 Vue 2.x부터 Template와 render()를 모두 지원하게 되었습니당

간편한 Syntax와 프로젝트 설정

간단한 Vue프로젝트는 jQuery처럼 쉽게 별도의 변환작업 없이 브라우저에서 바로 동작한다.

React도 기술적으로는 가능하지만 일반적으로 JSX와 ES6에 의존을 많이 하고 있다.

빠른 렌더링과 더 작은 용량

두 라이브러리가 어떻게 application data(state)를 처리하는지 살펴보면:

this.setState({
  message: this.state.message.split('').reverse().join('')
});

React에서 state는 불변의 속성을 갖는다.
그래서 직접적으로 변경 X.
만약, 상태를 변경하고 싶다면 위 처럼 setState()를 사용해야한다.
현재와 이전 상태를 비교해 언제, 어떻게 다시 DOM을 렌더링 할 지 결정하기 때문에 불변하는 속성이 필요하다.

반대로, Vue에서 data는 변경될 수 있다.:

this.message = this.message.split('').reverse().join('');

state에 새로운 객체를 추가했을 때, Vue가 해당 객체의 모든 속성을 확인하고나서 getter, setter로 변환한다.
Vue의 reacivity system이 모든 상태를 모니터링하여 변경이 일어날 때마다 자동으로 DOM을 다시 렌더링한다.

더 인상적인 부분은 Vue에서 state를 간단하게 변경할 수 있을 뿐만 아니라, Vue의 렌더링 시스템이 React보다 빠르고 더 효율적인 부분이다.