GitLab

MVVM (Model – View – ViewModel)

Model, View, ViewModel로 구성된 애플리케이션 구조 패턴

2005년 Microsoft의 John Gossman이 자신의 블로그에 WPF와 SilverLight의 아키텍쳐중 하나로 공개

MVVM 패턴의 구성 요소

• Model

• 애플리케이션의 기본 구성요소이다. 데이터가 표시되는 방식에서 의존성을 제거하는 것이 이 계층의 목적이다.

• View

• 사용자 인터페이스로 XAML 페이지로 구성된다. Visual Layout을 정의하는 모든 컨트롤 및 애니메이션을 포함한다.

• ViewModel

• Model로 부터 데이터를 검색 및 처리하고 화면에 표현될수 있도록 조작한다.

• MVC나 MVP 패턴과의 차이점은 View와 의존성이 없는 단순한 클래스로 구현된다는 것이다.

MVVM 패턴의 목표

애플리케이션의 구조를 정의하여 개발자를 돕기 위한 것. 코드와 사용자 인터페이스 사이의 강한 결속력을 없애고 비지니스 로직과 데이터 표현을 구분하는 것이다.

WPF에서는 데이터 바인딩, 커맨드, 이벤트등을 통해 사용자와 상호작용하고, 서로간의 의존 관계를 명확하게 분리하는 것을 목표로 한다.

MVVM 패턴을 사용하는 이유

기존 애플리케이션의 패턴과 구조의 문제

• 기존 코드에 새로운 기능을 추가하거나 버그를 수정하는 것이 어렵다.
• 유니테스트를 수행하기가 복잡하다.
• 사용자 인터페이스와 비지니스로직의 긴밀한 관계로 파트간 독립적으로 개발하기가 어렵다.
• 기존의 패턴들은 메소드의 집합이거나 API를 사용하는 방법뿐, 애플리케이션의 구조를 정의하는 방법이 아니다.

MVVM 패턴을 적용하여 해결

• 세가지 다른 계층으로 코드를 분할하고 각 계층 사이의 의존성이 없기 때문에 팀에서 작업하는 경우 애플리케이션을 유지보수하고 확장하는 것이 용이하다.
• 컨트롤이 이벤트 핸들러에 연결되는 방식에서는 유니테스트를 위해 이벤트 시뮬레이션(버튼 클릭등)을 직접 해야하는 문제가 있는데,
  MVVM 패턴은 ViewModel을 분리하여 사용자 인터페이스와 의존성을 끊고, ViewModel을 테스트할 수 있는 코드를 포함할 수 있다.
• 사용자 인터페이스와 비지니스 로직간의 긴밀한 연결이 끊어지기 때문에 모듈 구현시에 모든 내용을 알 필요가 없다. ViewModel을 쉽게 교체하고 실제 사용되는 데이터를 가짜로 만들어낼 수도 있으며, 이는 각 파트별로 개발하는데 도움이 된다.

XAML을 이용한 MVVM 패턴의 구현

• 바인딩

1. 바인딩 XAML 컨트롤 또는 코드에 선언된 컨트롤 속성간에 통신 채널을 생성한다.

public List Orders { get; set; }

위 컬렉션을 ListView 또는 GridView와 연결하려면 기존에는 코드에서 수동으로 할당해야 했었다. MyList.ItemsSource = Orders;

XAML 바인딩을 사용하면 아래와 같이 선언하여 의존성을 끊을 수 있다.

2. DataContext
3. INotifyPropertyChanged
4. ICommand