2.1.2 예제 - MVVM 자동 구현

1️⃣ 학습 목표

: 예제의 학습 목표와 동작 시나리오를 파악한 뒤, 소스코드를 직접 확인합니다.

✔️ 1. 학습 목표

• Step 1. 
  • Ex01INotifyPropertyChanged 예제의 C# MVVM 수동 구현 구조와 비교하여
    CommunityToolkit.Mvvm 패키지를 사용할 때, 어떤 부분을 효과적으로 사용 할 수 있는지 확인합니다.
• Step 2.
  • 이후에 CommunityToolkit.Mvvm 패키지를 사용해 자동 구현할 때,
    어떤 부분이 자동화되어 편리한지 확인합니다.

• Step 3.
  • 수동 구현 예제는 아래 자동완성 소스코드만으로 대체 구현 가능합니다.

using CommunityToolkit.Mvvm.ComponentModel;

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string? name;
}

 

 

 

 

✔️ 2. 예제 동작 시나리오

1. TextBox에 문자열을 입력하면
2. TextBlock에 반영되어 동시에 출력됩니다.

---

 

2️⃣ Ex.02ObservableProperty

: CommunityToolkit.Mvvm 패키지를 활용한 프로젝트를 단계별로 따라하며 구현해봅니다.

📁 1. 가장먼저, 아래 링크를 참고해 WPF 프로젝트를 생성 합니다.

WPF 프로젝트 생성하기

 

 

📁 2. 생성한 WPF 프로젝트에, 아래 링크를 참고해 CommunityToolkit.Mvvm 패키지를 설치합니다.

1.2 패키지 설치 방법

📁 3. 프로젝트 구조

Ch02_Sec01_Ex02ObservableProperty/
├── ViewModels/
│   ├── MainViewModel.cs         ← 메인 뷰모델     
├── Views/
│   ├── MainWindow.xaml          ← 메인 뷰
│   └── MainWindow.xaml.cs
├── App.xaml
└── App.xaml.cs

 

 

📁 4. ViewModel 구현하기

① 프로젝트를 생성하고, ViewModels 폴더 하나를 만든 뒤, MainViewModel.cs 파일을 만들어 줍니다.

 

② 문자열을 저장할 userName 필드를 하나를 생성하고,

③ userName 필드 상단에 [ObservableProperty] 어트리뷰트를 추가하면,

④ 관련 패키지의 네임스페이스가 자동 추가됩니다.

 

⑤ ViewModel 클래스에 ObservableObject를 상속받고,

⑥ 클래스는 public partial로 변경합니다.

📁 5. View 구성하기

④Views 폴더 아래에, MainWindow.xaml을 이동시킵니다.(또는 새로운 MainView를 생성합니다.)

⑤아래 XAML 코드를 붙여넣고, xmlns를 본인 프로젝트의 ViewModel 경로로 지정합니다.

<!-- MainWindow.xaml -->
<Window x:Class="WpfMvvmToolkit03_INotifyPropertyChanged.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        
        <!-- ViewModel 클래스가 위치한 네임스페이스 참조 -->
        xmlns:vm="clr-namespace:WpfMvvmToolkit03_INotifyPropertyChanged.ViewModel"

        Title="INotifyPropertyChanged Demo" Height="200" Width="400">

    <!-- View의 DataContext를 MainViewModel로 설정 -->
    <!-- 이렇게 하면 View에서 ViewModel의 속성에 바인딩할 수 있게 됩니다 -->
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>

    <StackPanel Margin="20">
        
        <!-- TextBox: 사용자가 입력하는 UI 요소 -->
        <!-- Name 속성과 양방향 바인딩되어, 텍스트를 입력하면 ViewModel.Name이 자동 갱신됩니다 -->
        <!-- UpdateSourceTrigger=PropertyChanged: 사용자가 입력할 때마다 즉시 ViewModel에 반영 -->
        <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" 
                 FontSize="14" Margin="0,0,0,10"/>

        <!-- TextBlock: 바인딩된 ViewModel.Name 값을 실시간으로 표시 -->
        <!-- ViewModel에서 Name 값이 변경되면, TextBlock에도 자동으로 반영됩니다 -->
        <TextBlock Text="{Binding Name}" FontSize="20" FontWeight="Bold"/>

    </StackPanel>
</Window>

 

 

📁6. App 수정

⑤App.Xaml 에서 시작 View 경로를, ⑥ViewModel 폴더로 이동시킨 MainWindow로 변경합니다.

⑦ 빌드합니다.

---

 

3️⃣ Source Generator 

: 자동 생성된 MVMM 소스코드 구현부 자세히 살펴보고, 수동 구현 구조와 비교하기

① CommunityToolkit.Mvvm 패키지의 [ObservableProperty] 어트리뷰트를 사용하면,

②  Source Generator는 MVVM에 필요한 소스코드를 자동 완성해 줍니다.

② 솔루션 탐색기에서, MainViewModel.cs에 자동완성된 On___Changed 함수를 더블 클릭합니다.

 

③ 테스트용 ViewModel 클래스 파일의 partial 클래스에서

④ 자동완성된 MVVM 소스코드들을 확인할 수 있습니다.

 

이전 포스트인 2.1.1 수동 구현 예제 에서 MVVM 구조를 위해 개발자가 구현해야 했던 소스코드들을  

CommunityToolkit.Mvvm 패키지의 Source Generator가 자동구현합니다.