[WPF/CommunityToolkit.Mvvm] 2. ViewModel 작성하고 View에 멤버 변수 바인딩하기

 지난번 글에서 ObservableObject를 상속받는 MainWindowViewModel class를 ViewModels 폴더에 생성하고 MainWindow.xaml 뷰의 DataContext에 바인딩 하는것 까지 설명을 했습니다.

자, 이렇게 생성된 ViewModel에 멤버 변수들을 선언하고 이것들을 View에 TextBox 컨트롤에 바인딩을 먼저 해보겠습니다.

기존 MVVM 패턴으로 코딩할때 가장 짜증스러운 부분이 View와 Binding하기위해 멤버변수를 선언하고 값이 변경되면 PropertyChange 이벤트를 Notify해주는 코드를 변수 하나 하나 마다 아래와같이 선언해 줘야했습니다. 

namespace MyTestApp.ViewModels
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

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

        private string title;
        public string Title
        {
            get
            {
                return title;
            }
            set
            {
                title = value;
                OnPropertyChanged();
            }
        }
     }
 }

변수 하나 선언하는데 저렇게 장황한데 10개 20개 이상 써야된다고 생각하면 코딩량이 상당합니다. 코드가 난잡해지는 느낌도 있구요. 하지만 CommunityToolkit.Mvvm을 .Net 6이상에서 간단히 attribute만 추가해주면 Code Generator가 위의 코드를 컴파일 타임에 자동으로 생성해줍니다.

 그래서 아래와 같이 코드가 굉장히 심플해지죠. Excellent~!

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyTestApp.ViewModels
{
    public partial class MainWindowViewModel : ObservableObject
    {
        [ObservableProperty]
        private string title;

        public MainWindowViewModel() 
        {
            Title = "초기값";
        }
    }
}

 멤버 변수 선언을 할 때, private 그리고 변수명의 첫 글자를 소문자로 써야합니다. 왜냐하면 Code Generator가 첫 글자가 대문자로 시작하는 같은 이름의 public 변수를 선언하는 코드를 만들어내기 때문이죠.

위에서 처럼 title을 선언할 때 getter/setter를 사용하면 안됩니다. 가끔 아무 생각 없이 뒤에 { get; set; }을 붙였다고 VS가 뿜어내는 에러를 보고 왜 에러나지?? 하며 아까운 시간을 낭비하기 싫다면요...

  Code Generation을 위한 위의 Attribute 를 사용하려면 class에 partial 키워드를 추가해줘야 합니다. Code Generator가 다른 파일에 동일한 class명의 partial class를 생성해야하니까요.

 

이제 MainWindowView.xaml을 열어 View에 textbox 컨트롤을 하나 추가합니다.

<Window x:Class="MyTestApp.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:MyTestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        DataContext="{Binding Source={StaticResource VmLocator}, Path=MainWindowVM}">
    <Grid>
        <TextBox></TextBox>
    </Grid>
</Window>

 이제 TextBox 컨트롤의 Text property에 ViewModel에서 선언한 Title을 아래와같이 바인딩 합니다.

    <Grid>
        <TextBox Text="{Binding Title}"></TextBox>
    </Grid>

 

F5키를 눌러 프로그램을 실행하면 ViewModel의 생성자에서 Title에 "초기값" 을 assign 했기 때문에 아래와 같이 TextBox에 값이 들어가서 보여질겁니다.

 이번 글에서는 ViewModel에 변수를 선언하고 해당 변수를 View에 있는 control에 값을 바인딩 시키는 방법을 알아봤습니다. 다음 글에서는 사용자 입력으로 바인딩된 값이 변할 때 ViewModel에서 해당 이벤트에 hook을 거는 방법에 대해 알아보겠습니다.