C#[WPF] 디자인 패턴 중 MVVM 패턴을 알아보자

MVVM 디자인 패턴

: MVVM(Model View ViewModel)

  MVVM 패턴은 Command 패턴과 Data Binding 2가지 패턴을 사용한다.(여기선 Data Binding 패턴으로 사용)

 

 

■ Model

DataModel은 비즈니스 클래스로 구성된다. UI에 제공된 데이터를 갖고 있다.

DataModel은 쉽게 단위 테스트가 가능하다.

■ View

View는 UI이다. 이상적으로 View는 순수 Xaml로 구성된다.

View는 자동화된 테스트를 사용해 테스트가 어렵기 때문에 View의 코드 양을 줄여야 하는 이유이다.

View의 Datacontext는 ViewModel이다. 

■ ViewModel

ViewModel은 아래의 같은 기능을 담당한다.

• 하나의 뷰에 대한 메서드로 속성 및 액션을 사용해 데이터를 노출한다.
• 뷰를 참조하지 않아야 하지만 뷰에 크게 의존한다.
• 다른 DataModel 혼합을 허용하거나 비동기 호출의 복잡성을 숨길 수 있다.
• 단위 테스트를 쉽게 할 수 있다.
• INotifyPropertyChanged를 구현한다.

■ MVVM 화면 코딩 순서

private double sound;

public double Sound { // 속성 추가
    get { return sound; }
    set { 
    	sound = value;
        onPropertyChanged("sound"); // 알림 속성
        onSoundChanged(); // 기능적 논리
    }
}

1. ViewModel를 생성한다.

 : Window, Page or UserControl 화면당 하나씩 생성되어한다.

 

예를 들면, 

•  View: \View\Screen.xaml
•  ViewModel: \View\ScreenViewModel.cs

2. ViewModel이 노출해야 하는 속성을 찾는다.

: 생성을 원하는 뷰를 확인해서 모든 사용자 입력이나 출력에 대한 ViewModel에 속성을 추가해야 한다.

 

3. 알림 속성(Notifying Properties)을 코딩한다.

: ViewModel에 추가되는 속성은 알림 속성이어야 한다.

 

4. ViewModel을 View의 DataContext로 사용한다.

: Xaml 사용 및 Code 비하인드 사용이다.

 

 - 아래 코드처럼 Xaml 사용 시 디자인 뷰를 표시할 경우 viewModel 클래스가 인스턴스화 될 수 있다.

<Window xmlns:vm="clr-namespace:ViewModels"
...
>

    <Window.DataContext>
        <vm:ScreenViewModel />
    </Window.DataContext>
...
</Window>

 - 코드 비하인드를 사용해서 DataContext 할당

public partial class Screen: Window
{
    public Screen()
    {
        InitializeComponent();
        this.DataContext = new ScreenViewModel();
    }
}

하지만, 디자인 뷰에서 데이터 바인딩 편집기의 도움을 받지 못한다.

 

해결책은 클래스를 지정하는 Xaml의 d:DataContext 특성을 사용하면 된다.

<Window xmlns:vm="clr-namespace:ViewModels"
    mc:Ignorable="d"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    d:DataContext="{d:DesignInstance vm:ScreenViewModel}"
...
>
...
</Window>

※ 비하인드를 사용해 DataContext를 할당하는 건 동일하다.

 

5. View를 ViewModel에 데이터 바인딩한다.

: 데이터 바인딩을 한다.

...
<TextBlock Text="{Binding Sound}" .../>
...

 

6. 기능적 논리를 코딩한다.(3단계부터 수행 가능)

: ViewModel로 가서 sound 속성의 설정자에서 onSoundChanged() 메서드 호출을 추가한다.

private void OnSoundChanged()
{
	Sounds = sound + 1;
}

 

■ MVVM 패턴의 장점과 단점

: MVVM 패턴의 장점은 view와 Model 사이의 의존성이 없습니다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다. 단점으로는 View Model의 설계가 쉽지 않습니다.

 

참고: WPF MVVM 일주일 만에 배우기