UWP 개발, UserListViewModel 뷰모델 수정하기

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 개발을 계속하면서 더 많은 패턴과 기법을 배우고 이를 적용하여 더 나은 앱을 개발하시기 바랍니다.