[WPF][MVVM] MVVM 패턴을 위한 ViewModel 추가

- 개발 환경

Window 11 (버전 24H2)

Visual Studio Community 2026 (18.0.2)

.NET framework 4.7.2

- 소스 코드

https://github.com/MainForm/WPF_MVVM_Base/tree/03d346fe93499c50289eb4085917b4e2839389ad

GitHub - MainForm/WPF_MVVM_Base

---

1. 서론

  ViewModel은 Model에서 전달 받은 데이터를 View에서 디자인한 UI에 출력하기 위한 모듈입니다. Model과 View를 연결해주는 모듈로 MVVM 패턴에서 가장 핵심이 되는 모듈입니다. 더나아가 Binding이라는 기능을 통해 View와의 의존성을 줄이고 Inerface를 통해 Model과의 의존성을 줄여 더욱 쉽게 협업 가능한 프로젝트를 구성할 수 있습니다. 

  ViewModel은 하나의 View에 하나의 ViewModel로 1:1대응하여 구성하는 것이 일반적입니다. 하지만, View 내 UI가 복잡해져 여러가지 서브 패널(Panel)이 필요한 경우 추가적은 ViewModel를 구성할 수 있습니다. 하지만 이번 포스트에서는 간단하게 ViewModel의 뼈대가 되는 ViewModelBase를 작성하고 MainWindow에 해당하는 MainViewModel를 추가할 것입니다.

2. ViewModelBase 작성

  ViewModelBase는 모든 ViewModel에서 상속하여 사용할 클레스입니다. 해당 클래스를 작성하는 목적은 Binding를 사용할 때 속성의 값을 변경시 자동적으로 UI 업데이트 되도록 하기 위합니다.

 

먼저 ViewModel를 추가할 ViewModels 폴더를 프로젝트에 추가합니다.

 

 이제 ViewModelBase.cs 파일을 ViewModels 폴더에 추가합니다.

 

ViewModelBase를 아래와 같이 작성합니다.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace WPF_MVVM_Base.ViewModels
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Equals(storage, value))
                return false;

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
    }
}

3. MainViewModel 작성

ViewModels 폴더에 MainViewModel를 추가합니다.

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPF_MVVM_Base.ViewModels
{
    public class MainViewModel : ViewModelBase
    {

    }
}

 

아직 MainWindow에 UI를 추가하지 않았으므로 추가적인 코드는 필요 없습니다.

 

4. View모델에 ViewModel 연결

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPF_MVVM_Base
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
			
            // DataContext에 MainViewModel 연결
            this.DataContext = new ViewModels.MainViewModel();
        }
    }
}

Views/MainWindow.xaml.cs

 

MainWindow 클래스의 DataContext 속성에 MainViewModel 인스턴스를 생성하여 추가합니다.

 

<Window x:Class="WPF_MVVM_Base.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_MVVM_Base"
        xmlns:vm="clr-namespace:WPF_MVVM_Base.ViewModels"
        mc:Ignorable="d"
        
        d:DataContext="{d:DesignInstance Type=vm:MainViewModel}"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
    </Grid>
</Window>

Views/MainWindow.xaml

 

  위와 같이 XAML에도 MainViewModel를 설정합니다. 위 설정을 통해 XAML에서 Binding할 시 자동완성기능이 동작하여 훨씬 편하게 UI를 디자인 할 수 있습니다.

---

5. 정리

  이제 ViewModel까지 프로젝트에 추가하였습니다. 이제 기본적인 MVVM 패턴의 프로젝트 구성은 마쳤습니다. 본격적으로 프로그래밍을 시작하기전에 MVVM 패턴의 꽃이라고 할 수 있는 Binding 기능을 다음 포스트에서 다루도록 하겠습니다.