[C# WPF] WVVM 디자인 패턴

WPF( Windows Presentation Foundation)는 XAML 기반의 UI 프레임워크로, 데이터 바인딩(Data Binding)과 커맨드 (Command) 기능을 활용해 MVVM(Model-View-ViewModel) 패턴을 효율적으로 구현할 수 있습니다. MVVM패턴은 UI와 비즈니스 로직을 분리하는데 효과적이며, 대규모 어플리케이션에서도 유지보수가 수비고 확장 가능한 구조를 제공합니다.

이번 글에서는 MVVM패턴의 개념과 장점, 그리고 WPF 프로젝트에서 MVVM패턴을 구현하는 방법을 자세히 알아보겠습니다.

---

1. MVVM 패턴이란?

MVVM은 Model, View, ViewModel로 구성된 디자인 패턴입니다. 각 구성 요소는 다음과 같은 역할을 담당합니다.

• Model : 애플리케이션의 데이터 및 비즈니스 로직을 관리합니다. 데이터베이스와 상호작용하거나 데이터를 처리하는 역할을 합니다.
• View : 사용자 인터페이스(UI)를 나타내며, WPF에서는 주로 XAML 파일로 설계됩니다. View는 ViewModel과 데이터 바인딩을 통해 데이터를 표시합니다.
• ViewModel : View와 Model 사이의 중재자 역할을 합니다. View의 상태와 동적을 관리하며, View와 데이터를 바인딩합니다.

MVVM의 핵심은 데이터 바인딩과 커맨드 패턴을 통해 View와 Viewmodel 간의 결합도를 낮추는 것입니다.

 

2. MVVM 패턴의 장점

• UI와 로직의 분리 : View는 UI를, ViewModel은 로직을 담당하므로 서로 독립적으로 개발할 수 있습니다. 이는 ui 변경이 로직에 영향을 미치지 않도록 합니다.
• 테스트 용이성 : ViewModel은 UI와 독립적이므로 유닛 테스트를 수비게 작성할 수 있습니다.
• 유지보수성 : 각 레이어가 분리되어 있어 코드를 수정하거나 기능을 확장하기가 용이합니다.
• 재사용성 : ViewModel은 View에 의존하지 않으므로 다른 View에서도 재사용할 수 있습니다.
• WPF와의 최적화된 통합 : WPF의 데이터 바인딩과 커맨드 기능은 MVVM 패턴과 자연스럽게 결합됩니다.

3. WPF에서 MVVM 패턴 구현하기

1) 프로젝트 생성 및 구조 설정

Visual Studio에서 WPF App 프로젝트를 생성합니다. 그리고 아래와 같이 폴더를 구성합니다.

• Models : 데이터 및 비즈니스 로직을 포함합니다.
• ViewModels : ViewModel 클래스가 포함됩니다.
• Views : UI를 설계하는 XAML 파일이 포합됩니다.

2) Model 작성

Model은 데이터를 정의하는 클래스입니다. 예를 들어 사용자 정보를 담는 UserModel 클래스를 작성해보겠습니다.

• 파일 경로 : Model/UserModel.cs

namespace WPF_MVVM_Demo.Models
{
    public class UserModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

 

3) ViewModel 작성

ViewModel은 View와 Model 사이의 중재 역할을 하며, 데이터 바인딩을 통해 View와 연결됩니다.

UserViewModel을 작성하여 사용자 정보를 관리합니다.

• 파일 경로 : ViewModels/UserViewModel.cs

using System.ComponentModel;
using WPF_MVVM_Demo.Models;

namespace WPF_MVVM_Demo.ViewModels
{
    public class UserViewModel : INotifyPropertyChanged
    {
        private UserModel _user;

        public UserViewModel()
        {
            _user = new UserModel { Name = "홍길동", Age = 25 };
        }

        public string Name
        {
            get => _user.Name;
            set
            {
                _user.Name = value;
                OnPropertyChanged(nameof(Name));
            }
        }

        public int Age
        {
            get => _user.Age;
            set
            {
                _user.Age = value;
                OnPropertyChanged(nameof(Age));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

 

4) View작성

View는 사용자에게 UI를 제공합니다 . XAML파일에서 ViewModel과 데이터 바인딩을 설정합니다.

• 파일 경로 : Views/MainWindow.xaml

<Window x:Class="WPF_MVVM_Demo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WPF_MVVM_Demo.ViewModels"
        Title="MVVM Demo" Height="200" Width="300">
    <Window.DataContext>
        <vm:UserViewModel />
    </Window.DataContext>
    <Grid>
        <StackPanel Margin="10">
            <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Margin="5" />
            <TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}" Margin="5" />
            <TextBlock Text="{Binding Name}" Margin="5" />
            <TextBlock Text="{Binding Age}" Margin="5" />
        </StackPanel>
    </Grid>
</Window>

 

5) MVVM의 핵심 : 데이터 바인딩과 INotifyPropertyChanged

• 데이터 바인딩 : XAML에서 ViewModel의 속성과 UI 요소를 연결합니다.
• INotifyPropertyChanged : 속성 값이 변경될 때 View에 알림을 보냅니다.

4. 결론

WPF에서 MVVM패턴을 사용하면 UI와 비즈니스 로직을 명확히 분리하고, 유지보수성과 확장성을 높일 수 있습니다. 데이터 바인딩과 커맨드 기능은 MVVM 구현을 단순화하며, 효율적인 개발 환경을 만들 수 있습니다.