UWP(Universal Windows Platform)는 다양한 Windows 기기에서 작동할 수 있는 앱을 개발할 수 있는 플랫폼입니다. UWP 앱은 MVVM(Model-View-ViewModel) 디자인 패턴을 사용하여 UI와 비즈니스 로직을 분리하는 것이 일반적입니다. 이번 글에서는 UWP 앱의 UserListViewModel을 수정하여 기능을 추가하는 방법에 대해 자세히 알아보겠습니다. 이 예제는 기본적인 데이터 바인딩 및 명령 패턴을 활용하여 사용자 목록을 관리하는 방법을 보여줍니다.
MVVM 패턴 이해하기
UWP 앱 개발에서 MVVM 패턴은 매우 중요합니다. 이 패턴은 세 가지 주요 구성 요소로 나뉘어 있습니다:
- Model: 애플리케이션의 데이터 및 비즈니스 로직을 포함합니다.
- View: 사용자 인터페이스(UI)를 구성하며 사용자가 보는 부분입니다.
- ViewModel: View와 Model 사이의 중재자로, View에 필요한 데이터와 명령을 제공합니다.
UserListViewModel은 사용자 목록을 나타내고 관리하는 ViewModel입니다. 이 ViewModel은 사용자 목록 데이터를 ObservableCollection으로 관리하며, 이 컬렉션의 변경 사항을 View에 자동으로 반영합니다.
UserListViewModel 구조 파악하기
기본적으로 UserListViewModel은 사용자의 리스트를 가져오고 필터링하는 기능을 수행할 수 있습니다. 다음은 기본적인 UserListViewModel의 구조입니다:
csharp
public class UserListViewModel : INotifyPropertyChanged
{
private ObservableCollection _users;
public ObservableCollection Users
{
get { return _users; }
set
{
_users = value;
OnPropertyChanged(nameof(Users));
}
}
public UserListViewModel()
{
Users = new ObservableCollection();
LoadUsers();
}
private void LoadUsers()
{
// 사용자를 여기에서 로드합니다.
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
UserListViewModel에 기능 추가하기
이 사용자 목록 ViewModel에 검색 및 필터링 기능을 추가해보겠습니다. 이를 통해 사용자는 사용자의 이름으로 목록을 검색할 수 있습니다. 이를 위해 다음과 같은 속성과 메서드를 추가할 수 있습니다.
csharp
private string _searchTerm;
public string SearchTerm
{
get { return _searchTerm; }
set
{
_searchTerm = value;
OnPropertyChanged(nameof(SearchTerm));
FilterUsers();
}
}
private void FilterUsers()
{
// 사용자 목록을 필터링하는 로직을 여기에 추가합니다.
}
이제 FilterUsers() 메서드에서 사용자의 이름을 기반으로 Users 컬렉션을 필터링하는 로직을 구현할 수 있습니다.
csharp
private void FilterUsers()
{
var filteredUsers = Users.Where(user => user.Name.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
Users.Clear();
foreach (var user in filteredUsers)
{
Users.Add(user);
}
}
UI와의 데이터 바인딩
이제 UserListViewModel을 UI와 연결합시다. UWP의 XAML에서는 데이터 바인딩을 통해 ViewModel의 프로퍼티를 쉽게 바인딩할 수 있습니다. 우선 XAML 파일에서 데이터 컨텍스트를 설정해야 합니다.
xml
데이터와 사용자 정의 객체
User 클래스는 사용자 정보를 담고 있어야 합니다. 다음은 User 클래스의 기본적인 구조입니다.
csharp
public class User
{
public string Name { get; set; }
}
종합 예제
모든 코드를 종합하여 예제를 완성해보겠습니다. 아래는 완전한 UserListViewModel 구현 및 XAML 페이지의 예입니다.
csharp
public class User
{
public string Name { get; set; }
}
public class UserListViewModel : INotifyPropertyChanged
{
private ObservableCollection _users;
public ObservableCollection Users
{
get { return _users; }
set
{
_users = value;
OnPropertyChanged(nameof(Users));
}
}
private string _searchTerm;
public string SearchTerm
{
get { return _searchTerm; }
set
{
_searchTerm = value;
OnPropertyChanged(nameof(SearchTerm));
FilterUsers();
}
}
public UserListViewModel()
{
Users = new ObservableCollection();
LoadUsers();
}
private void LoadUsers()
{
// 사용자 목록 샘플 데이터 추가
Users.Add(new User { Name = "Alice" });
Users.Add(new User { Name = "Bob" });
Users.Add(new User { Name = "Charlie" });
}
private void FilterUsers()
{
var filteredUsers = Users.Where(user => user.Name.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
Users.Clear();
foreach (var user in filteredUsers)
{
Users.Add(user);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
xml
결론
이번 글에서는 UWP 개발에서 UserListViewModel을 수정하여 필터링 기능을 추가하는 방법을 다루었습니다. MVVM 패턴을 활용한 데이터 바인딩 방식으로 사용자 목록을 효율적으로 관리할 수 있음을 보여주었습니다. 이러한 구조적 접근 방식은 UWP 앱 개발에서 코드의 재사용성과 유지보수성을 높이는 데 큰 도움을 줍니다.
UWP 개발을 계속하면서 더 많은 패턴과 기법을 배우고 이를 적용하여 더 나은 앱을 개발하시기 바랍니다.