1. 개요

MVVM 패턴에 대한 정리이다.


2. MVVM이란?

MVVM은 Model - View - ViewModel의 약자이다.

흔히 말하는 MVC가 Model - View - Controller로 이뤄져있기 때문에 비교가 가능하다.

추가로 MVP라는 것도 있는데 Model - View - Presenter이다.


3. MVC와의 차이점

Model , View는 동일한데 Controller가 ViewModel로 바뀐것이라고 보면 됨. 그리고 이 ViewModel은 UI단에 위치한다.


4. 각각의 설명

  • View : 사용자의 눈에 보이는 인터페이스 (디자이너가 만듬)
  • Model : 데이터 처리, 즉 데이터베이스와 통신
  • ViewModel : View와는 Binding, Command로 연결하고, Model과는 데이터를 주고 받는 역할

5. 처리 플로우

  1. View에 요청이 들어오면 Command를 통해 ViewModel로 보낸다.
  2. ViewModel은 Model에 데이터를 요청한다. 그리고 Model은 데이터를 응답한다.
  3. 이를 받은 ViewModel은 필요한만큼 가공한다.
  4. View는 ViewModel과의 Data Binding을 통해 데이터를 자동으로 갱신한다.

6. 사례

6-1. Knockout.js

MVVM 계열이며, Binding에 특화되어 있다. 기능은 많지 않지만 배우고 사용하기 편리하다.

6.2. Vue.js

만들어진 UI 구성요소를 조합하여 페이지를 구성

React나 Angular에 비해 가볍고 복잡도가 낮아서 진입 장벽이 낮다.

다음은 React와의 비교이다.

  • 가상 DOM 지원
  • 뷰에 집중하며 라우팅이나 상태 관리는 다른 라이브러리를 사용
  • 서버사이드 렌더링 지원 등