MVVM(Model-View-ViewModel) in Vue.js

 
​x
아키텍쳐 패턴(architectural pattern)
​
아키텍쳐 패턴이란 소프트웨어 아키텍처에서 흔히 일어나는 문제들에 대한 일반적이며 재사용 가능한 해결책을 말합니다. 소프트웨어 디자인 패턴과 유사하지만 더 광범위하게 다루고, 컴퓨터 하드웨어의 성능 제한, 사업 측면의 위험 부분에 대한 최소화 및 고가용성 등의 문제들을 해결합니다.

---

 

MVVM (Model-view-viewmodel) pattern

MVVM pattern은 Model-View-ViewModel의 약자로 소프트웨어 아키텍쳐 패턴이다. 초기 UI 개발자들은 모든 코드 로직(이벤트 핸들링, 초기화, 데이터 모델)을 뷰에 작성했다. 모든 코드들을 뷰에 작성하다보니 뷰의 크기가 커지고, UI와 데이터 바인딩간의 의존성 문제가 일어나다보니 개발자들의 협업 개발에서 많은 이슈가 일어나고 유지보수, 확장이 어려워졌다. 이를 해결하기 위해 사용자 인터페이스에 해당하는 뷰(View)와 뷰에 표시되는 데이터(Model) 그리고 뷰(View)와 모델(Model) 사이에서 여러 비즈니스 로직을 처리하는 뷰-모델(View-Model)로 분리하여, 유지보수를 쉽게하고 뷰(View) 처리에 다양한 기능을 사용할 수 있게 되었다.

Three key parts in the MVVM pattern

1. Model (비즈니스 규칙, 데이터 접근, 모델 클래스)
2. View (사용자 인터페이스)
3. ViewModel (모델과 뷰 사이의 인터페이스)

뷰모델(ViewModel)은 모델(Model)과 뷰(View)사이에 인터페이스 역할을 한다. 뷰모델은 모델의 데이터를 뷰에 바인딩하고, 명령어를 사용하여 모든 UI의 동작들을 다룬다. 뷰는 뷰모델의 프로퍼티에 제어값을 바인딩하며 차례대로 모델 객체에 있는 데이터를 노출시킨다.

예를 들어 사용자가 뷰에 있는 계산기 프로그램을 사용하여 결과값을 요청하는 버튼을 클릭했을 때, 뷰모델이 요청받은 동작을 수행한다. 뷰모델의 연산 기능을 담당하는 명령어는 연산 후 모델의 데이터 값을 변경시킨다. 만약 뷰모델의 속성값이 변경되면(모델의 데이터 값이 변경되면) 새로운 속성 값들은 데이터 바인딩(data binding)과 알림(notification)을 통해 자동적으로 뷰에 적용된다.

 

MVVM in Vue.js

Vue.js는 위의 설명된 MVVM 패턴에서 ViewModel 계층에 초점을 둔 프레임워크이다. 뷰모델을 통해서 양방향 데이터 바인딩이 가능하게 해주며, 뷰 계층을 좀 더 간단하고 유연하게 디자인하게 해준다.

아래 그림은 Vue.js에서 MVVM을 나타낸 그림이다. (출처 : https://012.vuejs.org/images/mvvm.png)

ViewModel in Vue.js

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

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

이렇게 초기 객체를 선언해줌으로써 뷰와 모델 사이에서 양방향 데이터 바인딩이 가능하게 해준다. 더 자세한 정보는 The Vue Constructor를 확인하자.

 

View in Vue.js

뷰의 실제 돔(DOM)은 Vue instances에 의해 관리된다.

 
xxxxxxxxxx
vm.$el // The View

Vue.js는 DOM 기반의 템플릿을 사용한다. 각 뷰 인스턴스는 해당 DOM 요소에 연관된다. 뷰 인스턴스가 생성되면 필요한 데이터 바인딩을 설정하는 동안 루트 요소의 모든 자식 노드를 반복적으로 탐색한다. 뷰가 컴파일이 되면 데이터 변경에 반응할 수 있게 된다.

즉, 해당 HTML 컴포넌트 범위(해당 DOM 요소가 담긴 템플릿)를 Vue instace의 vm.$el에 설정한다. 뷰는 Vue instance가 생성 될 때 컴파일 되며 뷰모델의 다양한 동작 기능들이 바인딩 된다. 그렇게 됨으로써 뷰의 변경이 감지되면 뷰모델이 이를 감지하여 반응할 수 있게된다. 추가적으로 뷰의 변경은 집단적으로, 비동기로 실행되기 때문에 높은 성능을 발휘한다.

 

Model in Vue.js

 
xxxxxxxxxx
vm.$data // The Model

Vue.js에서 모델은 단순히 자바스크립트 객체 혹은 데이터 객체로 표현할 수 있다. 데이터 객체의 프로퍼티를 조작하면 이를 관찰하는 뷰 인스턴스가 변경을 알린다. Vue.js는 ES5 getter/setters로 데이터 객체의 프로퍼티를 변환한다. 그렇기에 뷰를 변경하기 위해 Vue에 명시적으로 신호를 보낼 필요가 없다. 또한 각 뷰 인스턴스는 데이터 객체에 있는 모든 프로퍼티들을 프록시한다.

아래 그림은 Vue.js에서 반응형 업데이트가 구현되는 방식을 보여준다. (출처 : https://012.vuejs.org/images/data.png)

 

참고 자료

• understanding the basics of MVVM design pattern - https://blogs.msdn.microsoft.com/msgulfcommunity/2013/03/13/understanding-the-basics-of-mvvm-design-pattern/
• Model-view-viewmodel - https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
• Concepts overview in Vue.js org - https://012.vuejs.org/guide/