Vue.js 특징(MVVM 패턴, 인스턴스, 컴포넌트)

Vue.js 특징

1. MVVM 패턴

Vue.js는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리이다. 

• 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식
• 화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다.
  (화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해진다.)

용어	설명
뷰(View)	사용자에게 보이는 화면
돔(DOM)	HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반영하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel)	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

 

뷰 모델 (ViewModel)

• 모델과 뷰의 동기화 역할을 하는 객체
• Vue.js에서 모든 뷰 인스턴스(Vue instance)는 뷰모델(ViewModel)
• Vue 생성자 혹은 하위 클래스들에 의해 인스턴스화된다.

var vm = new Vue({ /* options */ })

var vm = new Vue({ /* options */ })

이렇게 초기 객체를 선언해줌으로써 뷰와 모델 사이에서 양방향 데이터 바인딩이 가능하게 해준다.

 

뷰 인스턴스(Instance)

뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

* 인스턴스

className c = new className();

: new 연산자와 같이 사용되어 클래스로부터 객체를 생성할 때 호출되어 객체의 초기화를 담당한다.

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
});
</script>

1) new Vue()로 인스턴스 생성

2) 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점 지정

3) data 속성에 message 값을 정의하여 화면의 {{message}}에 연결

 

※ 뷰 인스턴스 옵션

속성	설명
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.

※ 인스턴스가 화면에 적용되는 과정

※ 인스턴스 라이프 사이클

 

2. 컴포넌트 기반 프레임워크

: 코드를 재사용하기 위함. 뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 객관적으로 파악할 수 있다.

따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월해진다.

최신 프론트엔드 프레임워크인 리액트, 앵귤러 모두 컴포넌트 기반의 개발 방식을 추구하고 있다. 

 

※ 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록 

(뷰에서는 웹 화면을 구성할 때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.)

전역 컴포넌트 = 여러 인스턴스에서 공통으로 사용 가능

Vue.component('my-component' {
	template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
});

지역 컴포넌트 = 특정 인스턴스에서만 유효한 범위를 갖음

인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의한다.

var cmp={
	template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
};

new Vue({
	el: '#app'
    components: {
    	'my-local-component': cmp
    }
});

 

3. 가상 돔(Virtual DOM) 렌더링 방식

: 빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.

 

 

 

 

REFERENCE

Do it! Vue.js 입문 - 장기효