[Vue] Vue.js란

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

Vue.js

vue.js란

뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.

따라서 점진적인 프레임워크라고 불린다.

앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있다.

특징

UI 화면단 라이브러리

뷰는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

MVVM패턴이란 Model - View - ViewModel로 화면을 구조화하여 개발하는 방식으로

• DOM 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
• 데이터 바인딩 : view에 표시되는 내용과 모델의 데이터를 동기화

으로 분리하여 코드를 직관적으로 이해할 수 있으며 이후 유지보수에 용이하다.

View : 사용자에게 보이는 화면

DOM : HTML 문서에 들어가는 요소(태그, 클래스, 속석 등)의 정보를 담고 있는 데이터 트리

Model : 데이터를 담는 객체. 보통 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

ViewModel : 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트 기반 프레임워크

각 영역을 컴포넌트로 만들어 조합화며 화면을 구성한다.

• 코드를 재사용하기 용이하다
• 뷰의 경우 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다.

리액트와 앵귤러의 장점을 가진 프레임워크

• 앵귤러의 양방향 데이터 바인딩 (Two-way Data Binding)
  • 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경됨
• 리액트의 단방향 데이터 흐름 (One-way Data Flow)
  • 컴포넌트의 단방향 통신 항상 상위 컴포넌트 => 하위 컴포넌트 방향으로만 전달하도록 되어 있음

의 장점을 모두 결합한 프레임워크가 뷰이다.

가상돔 렌더링 방식

빠른 화면 렌더링 방식을 위해 리액트의 가상돔 렌더링 방식을 적용하여 사용자 인터렉션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다.

가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 따라서 브라우저의 성능 부하가 줄어든다.