UWP 개발, Collections

UWP(Universal Windows Platform) 개발에서 Collections은 데이터를 효율적으로 관리하고 표시하기 위해 사용하는 매우 중요한 개념입니다. 이 글에서는 UWP 개발에서 Collections의 기본 개념과 사용되는 주요 컬렉션 타입, 그리고 이들을 활용한 예제 코드에 대해 자세히 설명하겠습니다.

1. Collections의 기본 개념

Collections는 여러 객체를 하나의 그룹으로 묶어 관리할 수 있는 데이터 구조입니다. UWP에서는 주로 ObservableCollection<T>, List<T>, Dictionary<TKey, TValue>와 같은 클래스를 사용하여 컬렉션을 구현합니다. 이러한 컬렉션은 UI와의 데이터 바인딩을 통해 사용자 인터페이스를 동적으로 업데이트하는 데 매우 유용합니다.

2. 주요 컬렉션 클래스

2.1 ObservableCollection<T>

ObservableCollection<T>는 데이터의 변경사항을 UI에 자동으로 통지하기 위해 사용되는 컬렉션입니다. 이 컬렉션은 항목이 추가되거나 제거될 때 UI가 자동으로 업데이트되도록 보장하므로 MVVM 패턴을 사용하는 UWP 애플리케이션에서 매우 자주 사용됩니다.

2.2 List<T>

List<T>는 가장 기본적인 컬렉션으로, 요소의 집합을 저장합니다. 이는 유연하고 효율적이지만, UI와 동기화되지 않기 때문에 직접적인 데이터 바인딩을 지원하지 않습니다. 주로 복잡한 데이터 처리가 필요할 때 사용됩니다.

2.3 Dictionary<TKey, TValue>

Dictionary<TKey, TValue>는 키-값 쌍의 집합을 나타내며, 데이터 검색이 필요한 경우 유용합니다. 이 컬렉션은 키를 통해 값을 빠르게 검색할 수 있게 해줍니다.

3. 예제: ObservableCollection을 이용한 간단한 Todo List 애플리케이션

이 섹션에서는 ObservableCollection<T>를 사용하여 간단한 Todo List 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자가 할 일을 추가하고 삭제할 수 있도록 합니다.

3.1 데이터 모델

    public class TodoItem
    {
        public string Title { get; set; }
        public bool IsCompleted { get; set; }
    }
            

3.2 ViewModel 설정

    using System.Collections.ObjectModel;
    using System.ComponentModel;

    public class TodoViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<TodoItem> Todos { get; set; }
        
        public TodoViewModel()
        {
            Todos = new ObservableCollection<TodoItem>();
        }

        public void AddTodo(string title)
        {
            Todos.Add(new TodoItem { Title = title, IsCompleted = false });
            OnPropertyChanged("Todos");
        }

        public void RemoveTodo(TodoItem todo)
        {
            Todos.Remove(todo);
            OnPropertyChanged("Todos");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
            

3.3 XAML UI 구성

다음은 위에서 정의한 TodoViewModel을 바인딩하여 UI를 구성하는 XAML 예제입니다.

    <Page
        x:Class="TodoList.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TodoList">

        <Grid>
            <StackPanel>
                <TextBox x:Name="TodoInput" Width="300" PlaceholderText="할 일을 입력하세요" />
                <Button Content="추가" Click="AddButton_Click" />

                <ListBox ItemsSource="{x:Bind ViewModel.Todos, Mode=OneWay}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding IsCompleted}"></CheckBox>
                                <TextBlock Text="{Binding Title}" />
                                <Button Content="삭제" Click="RemoveButton_Click" Tag="{Binding}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Grid>
    </Page>
            

3.4 Code-behind: 버튼 클릭 이벤트

버튼 클릭 이벤트 핸들러를 구현하여 사용자가 할 일을 추가하거나 삭제할 수 있도록 합니다.

    public sealed partial class MainPage : Page
    {
        public TodoViewModel ViewModel { get; set; }

        public MainPage()
        {
            this.InitializeComponent();
            ViewModel = new TodoViewModel();
            DataContext = ViewModel;
        }

        private void AddButton_Click(object sender, RoutedEventArgs e)
        {
            var todoTitle = TodoInput.Text;
            if (!string.IsNullOrEmpty(todoTitle))
            {
                ViewModel.AddTodo(todoTitle);
                TodoInput.Text = string.Empty;
            }
        }

        private void RemoveButton_Click(object sender, RoutedEventArgs e)
        {
            var button = (Button)sender;
            var todoToRemove = (TodoItem)button.Tag;
            ViewModel.RemoveTodo(todoToRemove);
        }
    }
            

4. Collections의 성능 최적화

UWP에서 컬렉션을 사용할 때 성능을 최적화하는 것도 중요합니다. 특히 대량의 데이터나 빈번한 업데이트가 있는 경우 다음과 같은 방법으로 성능을 개선할 수 있습니다.

4.1 Virtualization 사용

ListViewGridView와 같은 항목 템플릿은 내부적으로 가상화 기능을 제공하여 화면에 한 번에 표시되는 항목만 메모리에 로드합니다. 이 기능을 활용하여 대량의 데이터를 효율적으로 표시할 수 있습니다.

4.2 CollectionChanged 이벤트 활용

ObservableCollection<T>CollectionChanged 이벤트를 사용하여 컬렉션의 변경사항을 UI에 통지합니다. 이를 통해 대량의 데이터 변경시 UI 업데이트 최적화를 고려해야 합니다.

5. 결론

UWP 개발에서 Collections은 데이터 관리와 UI 업데이트에 필수적인 요소입니다. ObservableCollection<T>을 활용하면 데이터 변경에 대한 UI의 즉각적인 반응이 가능하므로, MVVM 패턴을 통해 효과적으로 애플리케이션을 구성할 수 있습니다. UWP 애플리케이션에서 Collections의 활용을 통해 더욱 매력적인 사용자 경험을 제공할 수 있기를 바랍니다.