2.1.4 예제 - 2단계

1️⃣ 예제 2

✔️ 1. 동작 시나리오

1. TextBox에 입력하면 콘솔에 출력되던 로그를, ListBox UI 에 출력되도록 변경합니다.
2. ObservableCollection<string> Logs를 만들고,
   OnNameChanging과 OnNameChanged에서 로그를 추가하고,
   ListBox UI에 바인딩하여 실시간으로 로그가 출력되도록 구현합니다. 

 

 

✔️ 2. [ObservableProperty] 사용 예제

 

📁 2.1 MainViewModel.cs 수정

// 로그 출력을 위한 컬렉션 추가
public ObservableCollection<string> Logs { get; } = new();

// 콘솔 출력에, 로그에 저장 기능 추가 구현
partial void OnNameChanging(string? value)
{
    Console.WriteLine($"이름이 곧 '{value}'(으)로 변경됩니다.");
    // 추가
    Logs.Add($"[변경 전] 이름이 '{value}'(으)로 변경될 예정입니다.");
}

partial void OnNameChanged(string? value)
{
    Console.WriteLine($"이름이 '{value}'(으)로 변경되었습니다.\n");
    // 추가
    Logs.Add($"[변경 완료] 이름이 '{value}'(으)로 변경되었습니다.");
}

 

 

📁 2.2 XAML 화면 수정

<!-- 로그 출력 영역 추가 -->
<TextBlock Text="로그:" Margin="0,10,0,5" FontWeight="Bold"/>
<ListBox ItemsSource="{Binding Logs}" Height="100" />

 

 

📁 2.3 결과

 

• 텍스트 박스에 입력 →  콘솔에 OnNameChanging과 OnNameChanged의 구현부 로그 출력
  실제로 속성 변경 시점에 실행되는지 학생들이 눈으로 확인
• 기존 콘솔에 출력되던 로그 외, UI ListBox 에 로그가 출력됩니다.

---