[Vue] MVVM 패턴이란? (개념 / 특징 / 장점)

서론

이번에는 마틴 파울러의 프레젠테이션 모델 디자인 패턴의 변형인 MVVM패턴에 대해 정리해보려한다. 바로 알아보도록 하자.

 

---

MVVM 패턴이란 ?

---

MVVM[모델 - 뷰 - 뷰 모델(Model - View - viewModel)]은 아래와 같은 패턴을 말한다.

마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 아키텍처 패턴을 말한다.

이 정의를 다시 정리해보면 화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 DB 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다는 말을 뜻한다.

 

MVVM 패턴은 데이터를 가능한 순수한 응용 프로그램 모델에 가깝게 바인딩하는 데이터 바인딩과 프레임워크의 장점을 활용함과 동시에 MVC가 제공하는 기능 요소 개발의 분리라는 장점까지 해서, 이 둘을 다 얻어갈 수 있다.

 

이는 바인더, 뷰 모델, 그리고 어떤 비지니스 계층에 있는 데이터-검사 기능을 사용하여 들어오는 데이터를 검증한다.

 

결과적으로 모델과 프레임워크가 가능한 많은 작업을 수행하며, 뷰를 직접 조작하는 응용 프로그램 로직은 최소화하거나 아예 없애 버릴 수 있다는 특징이 있다.

 

---

 

MVVM의 구성 요소

---

모델(Model)

모델(Model)은 실제 상태 내용을 표현하는 도메인 모델을 참조하거나 내용을 표현하는 데이터 접근 계층을 참조한다.

 

뷰 (View)

뷰(View)는 MVC와 MVP 패턴에서와 같이 뷰는 사용자가 화면에서 보는 것들에 대한 구조, 배치와 같이 외관에 해당한다. 

모델을 보이게 표현하고 사용자와 뷰의 상호 작용을 수신하여, 이에 대한 처리를 뷰와 뷰 모델의 연결을 정의하고 있는 데이터 바인딩(속성, 이벤트 콜백 함수 등)을 통하여 뷰 모델로 전달한다.

 

뷰 모델(View Model)

뷰 모델(View Model)은 공용 속성과 공용 명령을 노출하는 뷰에 대한 추상화를 말한다.

MVVM은 바인더(Binder)를 가지고 있는데, 이는 뷰 모델에 있는 뷰에 연결된 속성과 뷰 사이의 통신을 자동화한다. 뷰 모델은 모델에 있는 데이터의 상태라고 표현을 하기도 한다.

 

---

 

https://012.vuejs.org/images/mvvm.png

MVVM 장점

---

1. View가 Data를 실시간으로 관찰한다.
Observable 패턴을 이용하기 때문에 DB를 관찰하고 자동으로 UI를 갱신해줄 수 있다.

2. 모듈화를 할 수 있다. (독립성 향상)
UI, 비지니스 로직, DB가 기능별로 모듈화가 되어있어, 역할 별로 유닛테스트가 용이해진다.

3. LifeCycle로 부터 안전해진다.
ViewModel을 통해 데이터를 참조하기 때문에 Activity | Fragment의 LifeCycle을 따르지 않는다.

4. 가상 돔(Virtual DOM)을 사용한다.
가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임 워크에서 정의한 방식에 따라 화면을 갱신할 수 있다.

이에 따라 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 보다 더 빠르게 그릴 수 있게된다.