C# WPF에서 MVVM 패턴에 대하여

해당 포스팅은 개인적으로 C# WPF를 공부하면서 익힌 내용을 기억에 남기기 위한 작업의 일환으로 작성된 글로서
일부 내용에 오류가 있을 수도 있으니 참고하시기 바랍니다.

 

 

C#WPF 프로그래밍에서 많이 사용되는
아키텍쳐 패턴인
MVVM(Model, View, ViewModel)에 대해 살펴보고
각각의 역할에 대해 알아보자.

 

 

내용 요약

 

MVVM(Model-View-ViewModel) 패턴은

WPF(Windows Presentation Foundation) 애플리케이션 개발에서

널리 사용되는 아키텍처 패턴이다.

이 패턴은 애플리케이션의 비즈니스 로직과 UI를 분리하여

코드의 재사용성, 테스트 용이성, 유지보수성을 높이는 데 중점을 두고있다.

MVVM 패턴은 세 가지 주요 구성 요소로 나뉩니다:

Model, View, ViewModel.

각 구성 요소는 특정 역할을 담당하며,

이들 간의 상호작용을 통해 애플리케이션이 동작한다.

반응형

목차
1.구성요소 설명
2.장점/단점
3.결론

 

1. 구성요소 설명

Model:
애플리케이션의 데이터와 비즈니스 로직을 포함한다.
데이터베이스나 웹 서비스와의 상호작용을 담당한다.
일반적으로 POCO(Plain Old CLR Object) 클래스로 구현된다.

View:
사용자 인터페이스(UI)를 담당한다.
XAML로 작성되며, 사용자와의 상호작용을 처리한다.
View는 ViewModel에 바인딩되어 데이터를 표시하고 사용자 입력을 전달한다.

ViewModel:
View와 Model 사이의 중재자 역할을 한다.
Model의 데이터를 View에 제공하고, View의 사용자 입력을 Model에 전달한다.
INotifyPropertyChanged 인터페이스를 구현하여 데이터 바인딩을 지원한다.

 

---------------------------------     예시     ---------------------------------
간단한 To-Do 리스트 애플리케이션을 예로 들어 MVVM 패턴을 설명하면,

 

<Model>

public class TodoItem
{
    public string Title { get; set; }
    public bool IsCompleted { get; set; }
}

 

<View(XAML)>

<Window x:Class="TodoApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="To-Do List" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding TodoItems}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox IsChecked="{Binding IsCompleted}" />
                        <TextBlock Text="{Binding Title}" Margin="5,0,0,0"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <TextBox Text="{Binding NewTodoTitle}" Width="200" Height="25" VerticalAlignment="Bottom" Margin="10"/>
        <Button Content="Add" Command="{Binding AddTodoCommand}" Width="75" Height="25" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10"/>
    </Grid>
</Window>

 

<ViewModel>

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;

public class MainViewModel : INotifyPropertyChanged
{
    private string _newTodoTitle;
    public string NewTodoTitle
    {
        get { return _newTodoTitle; }
        set
        {
            _newTodoTitle = value;
            OnPropertyChanged(nameof(NewTodoTitle));
        }
    }

    public ObservableCollection<TodoItem> TodoItems { get; set; }

    public ICommand AddTodoCommand { get; set; }

    public MainViewModel()
    {
        TodoItems = new ObservableCollection<TodoItem>();
        AddTodoCommand = new RelayCommand(AddTodo);
    }

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(NewTodoTitle))
        {
            TodoItems.Add(new TodoItem { Title = NewTodoTitle });
            NewTodoTitle = string.Empty;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

 

<RelayCommand>

using System;
using System.Windows.Input;

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute();
    }

    public void Execute(object parameter)
    {
        _execute();
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }
}

 

2.장점/단점

장점

 

1.유지보수성
코드가 명확하게 분리되어 있어 유지보수가 용이하다.

UI 로직(View)과 비즈니스 로직(Model)이 분리되어 있어 각각 독립적으로 수정할 수 있다.

 

2.재사용성
ViewModel은 View와 독립적이므로 다른 View에서 재사용할 수 있다.

이는 코드의 중복을 줄이고 재사용성을 높인다.

3.테스트 용이성
ViewModel은 UI와 분리되어 있어 단위 테스트가 용이하다. 

UI를 테스트할 필요 없이 비즈니스 로직을 검증할 수 있다.

4.데이터 바인딩
WPF의 강력한 데이터 바인딩 기능을 활용하여 

View와 ViewModel 간의 데이터 동기화가 자동으로 이루어진다.

이는 코드의 간결성을 높이고 버그를 줄여 준다.

 

 

단점

 

1.초기 학습 곡선
MVVM 패턴을 처음 접하는 개발자에게는 

개념과 구현이 다소 복잡하게 느껴질 수 있다.

특히 데이터 바인딩과 ICommand 인터페이스의 사용법을 익히는 데 시간이 걸릴 수 있다.

 

2.복잡성 증가
작은 프로젝트에서는 MVVM 패턴이 오히려 복잡성을 증가시킬 수 있다. 

단순한 애플리케이션에서는 오버헤드가 될 수 있다.

 

3.코드 양 증가
MVVM 패턴을 적용하면 코드의 양이 증가할 수 있다. 

특히 ViewModel과 RelayCommand를 구현하는 데 추가적인 코드가 필요하다.

 

4.성능 문제
데이터 바인딩과 INotifyPropertyChanged 인터페이스를 과도하게 사용하면 

성능 문제가 발생할 수 있다.

특히 대규모 데이터셋을 다룰 때 주의가 필요하다.

 

3.결론

 

MVVM 패턴은 WPF 애플리케이션 개발에서 자주 등장하는

강력한 아키텍처 패턴으로,

유지보수성, 재사용성, 테스트 용이성 등의 장점을 제공한다.

그러나 초기 학습 곡선과 복잡성 증가 등의 단점도 존재한다.

프로젝트의 규모와 복잡성에 따라

MVVM 패턴을 적용할지 여부를

신중하게 결정하는 것이 중요하다.