Vue.js란?
Vue.js란?
Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계되어있다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다.
Vue의 핵심 라이브러리는 양방향 데이터 바인딩을 사용하여 프로토타입과 뷰 구성 요소 간의 동적 조정을 가능하게 하는 뷰 모델 구성 요소에 의존한다. 이렇게 하면 단일 페이지 앱 개념을 사용하는 표준 웹 프로그램을 더 쉽게 구축할 수 있다. 데이터 연결을 통해 Vue는 핵심 Vue 모델에 “연결된” HTML 파일을 동적으로 개조한다.
다른 프레임워크와의 비교
React
React와 Vue는 많은 공통점을 공유한다.
- 가상 DOM을 활용한다.
- 반응적이고 조합 가능한 컴포넌트를 제공한다.
- 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.
런타임 퍼포먼스
렌더링 성능
UI를 렌더링 할 때 일반적으로 DOM을 조작하는 것이 가장 비용이 많이 드는 작업이며, 라이브러리는 이러한 원시 작업을 더 빠르게 만들 수 없다. 따라서 Vue가 제시한 방법은 다음과 같다.
- 필요한 DOM 조작 수를 최소화한다. React와 Vue는 모두 가상의 DOM 추상화를 사용하여 이 작업을 수행하며 두 가지 구현 모두 거의 동일하게 작동한다.
- DOM 조작에 가능한 적은 오버헤드(순수 JavaScript 계산)만 가한다. 이 것은 Vue와 React의 차이이다.
JavaScript의 오버헤드는 필요한 DOM 작업을 계산하는 메커니즘과 직접적으로 관련이 있다. Vue와 React 모두 가상 DOM을 사용하여 이를 구현하지만 Vue의 가상 DOM 구현(snabbdom의 포크)은 훨씬 가벼우므로 React보다 더 적은 오버 헤드가 발생한다.
Vue와 React 모두 상태가 없고 및 인스턴스가 없는 컴포넌트를 제공하므로 오버 헤드가 적다. 이러한 성능이 중요한 상황에서 사용되면 Vue가 더 빠르다. 이를 입증하기 위해 Vue는 10,000 개의 목록 항목을 100 번 렌더링하는 간단한 벤치 마크 프로젝트를 만들었다. 결과는 하드웨어와 사용되는 브라우저에 따라 다르므로 실제로 시도해 보는 것이 좋다. 실제로는 JavaScript 엔진의 특성으로 인해 실행간에 차이는 있다.
약간 귀찮더라도, 아래는 2014 년 MacBook Air의 Chrome 52에서 실행 된 숫자이다. 체리 피킹을 피하기 위해 두 벤치 마크는 실제로 20번의 별도 시간에 실행되었으며 아래에 포함 된 최상의 실행 결과가 있다.
| Vue | React | |
|---|---|---|
| Fastest | 23ms | 63ms |
| Median | 42ms | 81ms |
| Average | 51ms | 94ms |
| 95th Perc. | 73ms | 164ms |
| Slowest | 343ms | 453ms |
********갱신 성능********
React에서는 컴포넌트의 상태가 변경되면 해당 컴포넌트에서 루트로 시작하여 전체 컴포넌트 하위 트리를 다시 렌더링한다. 불필요한 자식 컴포넌트의 재 렌더링을 피하려면 어디에서나 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 한다. Vue에서 컴포넌트의 종속성은 렌더링 중 자동으로 추적되므로 시스템은 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고 있다.
즉 최적화되지 않은 Vue의 업데이트는 최적화되지 않은 React보다 훨씬 빠르며 실제로 Vue의 렌더링 성능이 향상되므로 완전히 최적화 된 React도 보통 Vue가 기본 제공되는 것보다 느리다.
**********개발에 있어서**********
Vue와 React 모두 거의 대부분의 일반적인 애플리케이션에서 속도가 빠르다. 그러나 높은 프레임 속도의 데이터 시각화 또는 애니메이션을 프로토 타이핑 할 때 Vue는 개발시 초당 10 프레임을 처리하는 반면 React는 초당 약 1 프레임으로 떨어지는 경우를 보았다.
이것은 많은 우수한 경고와 오류 메시지를 제공하는 데 도움이 되는 개발 모드에서의 React의 많은 무질서한 검사 때문이다. Vue는 이 것들이 Vue에서도 중요하다는 것에 동의하지만, 이를 이행하는 동안 성과를 면밀히 관찰하려고 노력했다.
HTML & CSS
React에서는 모든 것이 JavaScript이다. JSX를 통해서 HTML 구조가 들어와있을 뿐만 아니라 요즘에는 CSS 관리도 JavaScript에서 하는 추세이다. 이 접근 법도 나름대로 장점이 있지만 모든 개발자들에게 적합하다고 하기에는 단점이 좀 있다.
Vue는 고전적인 웹기술들을 받아들여서 그 기반 위에 만들어졌다. 몇 가지 예를 통해서 무슨 뜻인지 살펴보겠다.
JSX vs Template
React에서 모든 컴포넌트는 JSX를 사용하는 렌더링 함수를 통해서 UI를 표현한다. JSX는 JavaScript에서 작동하는 선언적인 XML 유사 문법이다.
React에서 모든 컴포넌트는 JavaScript에서 작동하는 선언적 XML 유사 구문인 JSX를 사용해 렌더링 함수 안에서 UI를 표현한다.
JSX를 이용하는 렌더링 함수를 사용하면 몇 가지 장점이 있다.
- 완전한 프로그레밍 언어(JavaScript)를 이용해서 뷰를 만들 수 있다. 임시 변수, 플로우 제어에 스코프 내에서 직접적으로 JavaScript의 값을 가져다 쓸 수도 있다.
- JSX의 툴 지원(예: linting, 형 검사, 자동완성 기능)은 어떤 측면에서 현재 사용할 수 있는 Vue 템플릿보다 더 진보된 기능이다.
Vue에서도 렌더링 함수에 심지어 JSX 지원을 쓸 수 있다. 하지만 기본적으로는 템플릿 이용을 더 간단한 대안으로 제공한다. 잘 작동하는 HTML은 Vue 템플릿으로도 잘 작동하며 여기에서 오는 장점들이 있다.
- HTML로 작업해온 많은 개발자에게는 템플릿을 읽고 쓰는 것이 어렵지 않다. 선호라는 것은 다소 주관적일 수도 있겠지만 개발자의 생산성이 올라간다면 그건 객관적인 것이다.
- HTML 기반 템플릿을 이용하면 기존의 어플리케이션을 Vue로 점진적으로 이전하기가 훨씬 쉽다.
- 또한 디자이너와 경험이 적은 개발자들이 코드를 분석하고 기여하기에도 훨씬 쉽다.(역자: 러닝 커브가 낮다)
- Vue 템플릿을 쓸 때 Pug(이전의 Jade)같은 프리프로세서를 사용할 수도 있다.
어떤 사람들은 템플릿을 작성하기 위해서는 별도의 언어(DSL, Domain-Specific Language)를 또 배워야 한다고도 한다. 하지만 Vue가 볼 때는 그 차이가 기껏해봐야 매우 피상적인 수준이라고 생각한다. 먼저 JSX도 사용하려면 학습을 해야 한다. JSX도 플레인 JavaScript에 문법이 추가되어 있어서 JavaScript에 익숙한 사람이라면 공부할 것이 많지는 않겠지만 따로 더 배울게 없다고 할 수는 없다. 비슷하게 템플릿도 플레인 HTML에 문법을 추가한 것이라서 HTML에 익숙한 사람에게는 공부할 것이 많지 않다. 별도의 언어(역자: 템플릿 문법)를 써서 사용자들이 더 적은 코드(예: v-on 수식어)를 써서 더 많을 것을 처리할 수 있다. JSX나 렌더링 함수를 쓰면 같은 일을 처리하기 위해서 더 많은 코드를 써야 한다.
좀 더 높은 수준에서 이야기하자면 컴포넌트는 표현형과 논리형 두 가지로 나눌 수 있다. 템플릿은 표현형 컴포넌트에, 렌더링 함수와 JSX는 논리형 컴포넌트에 사용하는 것이 좋다. 어떤 어플리케이션을 만드는가에 따라 어느 형의 컴포넌트가 많을 지는 다르지만 일반적으로는 표현형 컴포넌트가 더 많다.
컴포넌트 범위의 CSS
컴포넌트를 여러 파일 (예: CSS 모듈)을 통해 배포하지 않는 한 React의 CSS 범위 지정은 CSS-in-JS 방식으로 해결합니다. (e.g. styled-components, glamorous, 그리고 emotion) 이는 일반적인 CSS 작성 프로세스와는 다른 새로운 컴포넌트 지향 스타일링 패러다임을 뜻한다. 또한 빌드타임에 단일 스타일시트에 CSS를 추출할 수 있는 지원이 있지만 스타일이 제대로 작동하려면 런타임이 번들에 포함되어야하는 것이 일반적이다. 스타일을 작성하는 동안 JavaScript의 역동적인 기능을 사용할 수 있지만 증가한 번들 크기 및 런타임 비용으로 종종 그 대가를 치룬다.
CSS-in-JS의 팬이라면 유명한 CSS-in-JS 라이브러리들도 Vue를 지원한다는 점을 눈여겨봐주시기 바란다.(예 styled-components-vue와 vue-emotion). 여기서 React와 Vue의 가장 큰 차이점은 Vue에서는 기본 스타일링 방식으로 싱글 파일 컴포넌트 안에서 우리에게 익숙한 style 태그를 사용한다는 것이다.
싱글 파일 컴포넌트를 통해서 다른 컴포넌트 코드와 마찬가지로 CSS에 접근할 수 있다.
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
옵션인 scoped 속성은 자동적으로 엘리먼트에 유일한 속성(예 : data-v-21e5b78)을 추가해서 .list-container:hover를 .list-container[data-v-21e5b78]:hover로 컴파일 한다.
마지막으로 Vue의 싱글 파일 컴포넌트의 스타일은 매우 유연하다. vue-loader를 통해 전처리기, 포스트 프로세서 및 CSS Modules와의 긴밀한 통합을 할 수 있다. 모든 스타일은 <style> 엘리먼트 안에 있다.
이외에 더 많은 차이점이 있다. React를 제외한 다른 프레임워크와의 차이점 등 더 자세한 내용은 Vue.js 공식문서에서 볼 수 있다.
참고 사이트: Vue 공식문서, https://v2.ko.vuejs.org/v2/guide/
