Print
카테고리: [ Development ]
조회수: 6703

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. 각각의 설명


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와의 비교이다.

다음은 Vue.js 프로젝트 시 담당자간 역할이다.