Model

• 눈에 보이지 않는 데이터 부분
• 비즈니스 로직을 포함한 데이터 모델
• 간단한 데이터를 처리하는 카운터와 같은 경우에는 별도로 Model을 만들지 않는 경우도 있음

View

• 눈에 보이는 부분
• XAML로 정의

View Model

• View Model은 View를 모름, Model은 View Model을 모름
• View Model은 View와 data binding되는 property 및 command를 제공하고, 상태 변경을 event로 알림
• View Model은 Model의 모델 데이터를 View에서 사용하기 쉬운 형식으로 변환하여 가지고 있음
• 데이터 변환은 뷰 모델 내에서 처리하거나 별도의 변환 계층을 통해 중앙 집중화
• 양방향 바인딩을 위해 INotifyPropertyChanged 구현하고, ObservableCollection<T>로 컬렉션 변경 알림

Model Class

namespace G24W11WPFCounter;

// 카운터의 데이터를 관리하는 모델 클래스
class CounterModel {
	private int _count = 0; // 카운트 값 (내부 변수)

	// Count 프로퍼티: 카운트 값을 외부에서 접근 가능하며 음수로 설정되지 않도록 제한
	public int Count {
		get => _count; // 현재 카운트 값 반환
		set { if (value >= 0) _count = value; } // 값이 0 이상일 때만 설정
	}
}

ViewModel Class

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace G24W11WPFCounter;

// View와 Model을 연결하는 역할을 담당하는 ViewModel
public class CounterViewModel : INotifyPropertyChanged {
	private CounterModel _model; // 모델 객체
	public event PropertyChangedEventHandler? PropertyChanged; // 데이터 변경 알림 이벤트

	// 생성자: 모델 객체를 초기화
	public CounterViewModel() {
		_model = new CounterModel();
	}

	// Value 프로퍼티: 모델의 Count 값을 바인딩
	public int Value {
		get => _model.Count; // 모델의 카운트 값 가져오기
		set {
			_model.Count = value; // 모델에 새로운 값 설정
			OnPropertyChanged(); // UI에 데이터 변경 알림
		}
	}

	// UI에 데이터 변경을 알리는 함수
	// CallerMemberName 애트리뷰트를 사용해 호출된 프로퍼티 이름 자동 전달
	protected void OnPropertyChanged([CallerMemberName] string propName = "") {
		PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
	}
}

View(xaml)

<Window
  x:Class="G24W11WPFCounter.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:G24W11WPFCounter"
  mc:Ignorable="d"
  Title="카운터"
  Height="422"
  Width="285"
>
  <Grid>
    <!-- 배경 이미지를 설정 -->
    <Grid.Background>
      <ImageBrush
        ImageSource="/diego-jimenez-A-NVHPka9Rk-unsplash.jpg" 
        Stretch="UniformToFill" 
      />
    </Grid.Background>

    <!-- 증가 버튼 -->
    <Button
      x:Name="BtnAdd" 
      Content="증가" 
      HorizontalAlignment="Center" 
      Margin="0,231,0,0" 
      VerticalAlignment="Top" 
      FontSize="24" 
      Click="OnAdd" 
      Width="246" 
    />
    
    <!-- 감소 버튼 -->
    <Button
      x:Name="BtnSub" 
      Content="감소" 
      HorizontalAlignment="Center" 
      Margin="0,285,0,0" 
      VerticalAlignment="Top" 
      FontSize="24" 
      Click="OnSub" 
      Width="246" 
    />

    <!-- 카운트 값을 표시할 텍스트 -->
    <TextBlock
      x:Name="TxtCount" 
      HorizontalAlignment="Center" 
      Margin="0,93,0,0" 
      TextWrapping="Wrap" 
      Text="{Binding Value}" 
      VerticalAlignment="Top" 
      Height="70" 
      Width="246" 
      Background="#FFEAEA64" 
      FontSize="48" 
      TextAlignment="Center" 
    />
  </Grid>
</Window>