[디자인 패턴] Architectural Pattern(아키텍처 패턴) - MVVM

오늘은 Architectural Pattern(아키텍쳐 패턴) 중에서도 MVVM 패턴에 대하여 설명해보려고 한다. 

MVVM 패턴은 주로 엔터프라이즈 규모의 대화형 어플리케이션을 설계하는 뼈대가 되는 패턴이다. 주로 MVC과 비교 된다.  요새 모바일 웹/앱을 포함해 대화형 어플리케이션은 전체 소프트웨에서 상당히 많은 부분을 차지함을 생각해보면, 

MVVM 패턴은 .Net, ios, Android 등 다양한 분야에서 사용되고 있다는 사실이 크게 놀랍지 않다.

 

Architectural Pattern

Architectural Pattern(아키텍처 패턴)은 소프트웨어 아키텍처의 공통적인 발생 문제에 대한 일반적인, 재사용 가능한 해결책을 의미한다.(위키) 생성, 구조, 행위 패턴으로 나뉘어져 있는 일반적인 소프트웨어 디자인 패턴과는 조금 다른 성격을 가진다.  디자인 패턴이라고 하면 소프트웨어를 일정 틀에 맞취어 모듈화, 구조화 함으로써 재사용성을 높이려고 고안된 점에서는 같지만, 문제 해결의 범위가 다르다고 보면 될 것 같다.

 

MVVM 패턴(모델 - 뷰 - 뷰모델)

MVVM 디자인 패턴

• View: 사용자의 Interaction을 받아들이는 UI를 의미한다. 주로 마크업 업어로 구현되어 있다. 
• ViewModel
  • Command 패턴으로 사용자의 Action을 처리하고 Data Binding 방법을 UI의 데이터를 업데이트 한다. 결론적으로 ViewModel은 UI Element의 직접적인 접근 없이 이벤트를 처리하고 데이터를 변경할 수 있게 된다(의존성제거). 유닛테스트에 강력한 이점으로 작용한다. 
  • View와 ViewModel은 n:1 관계이다. 경험상 ViewModel을  1:1로 쪼개면, View와 연결된 데이터를 확인하는 일은 간단해지지만, UI간 데이터 전달이 복잡해져 별로 추천하지 않는다. 
• Model: 실제적인 데이터 접근에 관여한다. DB, 서비스 클라이언트 등으로 구성된다.

 

예제 (C#) 

간단한 Counter를 구현하고, 이를 파일에 저장하는 예제 프로그램을 구현해보았다. 

Counter

View

- CountView.xaml.cs 의 생성자에서는 DataContext = new CountViewModel()을 추가한다. 

CountView.xaml

ViewModel

- 이름으로 Command와 Data를 관리할 뿐, View를 알지 못하고, UI요소에 접근하지 않는다.

CounterViewModel.cs

Model

- 실제적인 데이터의 관리를 담당한다. 

FileCountSaver.cs

Reference

https://ko.wikipedia.org/wiki/%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98_%ED%8C%A8%ED%84%B4

아키텍처 패턴 - 위키백과, 우리 모두의 백과사전

https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EB%B7%B0%EB%AA%A8%EB%8D%B8

모델-뷰-뷰모델 - 위키백과, 우리 모두의 백과사전