서론
요새 많이 쓰이는 MVVM 패턴에 대해서 설명할 수 있게 정리해보는 시간을 갖도록 해보겠습니다.

개념

위키피디아 정의를 보면 MVVM 은 View와 비즈니스 로직(back-end 로직)을 분리하기 쉽게하여 뷰가 Model의 특정 플랫폼에 위존하지 않게하는 아키텍처 패턴입니다. View Model은 Value Converter의 역할을 하는데 Data를 조작하거나 보여주기 쉽게 만드는 역할을 합니다.

Command 패턴과 Data Binding을 사용하여 구현합니다.

graph LR; View ---|Data Binding| ViewModel ViewModel --> Model Model --> ViewModel

 

MVVM 패턴의 요소

  • Model
    Model은 콘텐츠를 나타내는 Domain Model(객체지향 접근 방식) 또는 데이터 접근 계층(데이터 중심 접근 방식)을 나타냅니다.
  • View
    사용자가 화면에서 보는 구조, 레이아웃 등을 말합니다.
    모델을 표시하고 사용자와 상호작용(클릭, 탭 등)을 하며 데이터 바인딩(속성, 이벤트 콜백 등)을 통해 ViewModel과 연결합니다.
  • ViewModel
    뷰의 추상화입니다.
    MVC 패턴의 Controller나 MVP 패턴의 Presenter 대신에 Binder가 있습니다.
    View에 대한 참조가 없고 View가 ViewModel의 속성에 직접 Binding하여 업데이트를 보내고 받습니다.
  • Binder
    MVVM 패턴을 가능하게 합니다. 보일러플레이트 코드(boilerplate code)를 줄여줍니다.

 

동작 순서

 

sequenceDiagram participant View participant ViewModel participant Model View ->> ViewModel: 사용자 Action을 Command 패턴으로 전달 ViewModel ->> Model: 데이터 요청 Model ->> ViewModel: 데이터 응답 alt Transfer ViewModel->>ViewModel: 데이터 가공하여 저장 end View --> ViewModel: Data Binding alt Update View->>View: 뷰 업데이트 end