[MAUI 활용] BookStore 만들기 (7) – Book List 페이지 만들기 Part1

이제 본격적으로 도서 리스트를 조회할 수 있는 View(페이지) 를 만들어 보겠습니다. 혹시 MAUI 에서 사용하는 DataBinding 개념에 익숙치 않으면 데이터바인딩에 대한 이전 포스팅을 참고하시기 바랍니다.

우선 MainPage.xaml 파일을 열어서 아래와 같이 namespace 와 DataType 을 정의합니다 . 나머지 부분은 모두 삭제합니다.

[MainPage.xaml]

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MyBookStore.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:model="clr-namespace:MyBookStore.Models"
    xmlns:viewmodel="clr-namespace:MyBookStore.ViewModels"
    Title="Book List Page"
    x:DataType="viewmodel:BookListViewModel" />

추가된 부분은 아래와 같습니다.

xmlns:model="clr-namespace:MyBookStore.Models"
xmlns:viewmodel="clr-namespace:MyBookStore.ViewModels"
x:DataType="viewmodel:BookListViewModel" />

이 부분은 XAML 파일에서 네임스페이스를 선언하고, 페이지의 제목과 데이터 타입을 설정하는 코드입니다. 각 속성에 대해 자세히 설명하겠습니다.

xmlns:model=”clr-namespace:MyBookStore.Models”
- xmlns:model은 XAML 파일에서 네임스페이스를 선언하는 방법입니다.
- 여기서 model이라는 별칭을 사용해 MyBookStore.Models 네임스페이스를 참조합니다.
- 이 네임스페이스는 주로 모델 클래스가 포함된 폴더를 가리키며, 데이터 객체나 엔티티를 정의하는 데 사용됩니다.
xmlns:viewmodel=”clr-namespace:MyBookStore.ViewModels”
- 이 부분은 MyBookStore.ViewModels 네임스페이스를 viewmodel이라는 별칭으로 참조합니다.
- ViewModel은 MVVM 패턴에서 뷰와 모델 간의 데이터 바인딩을 관리하는 클래스입니다.
- ViewModel 클래스는 주로 UI에 표시될 데이터를 준비하고, 비즈니스 로직을 처리하며, 뷰와 상호작용하는 역할을 합니다.
x:DataType=”viewmodel:BookListViewModel”
- x:DataType 은 XAML에서 바인딩할 데이터의 유형을 지정합니다.
- 이를 통해 컴파일 타임에 바인딩 표현식의 유효성을 검사하고, XAML 편집기에서 IntelliSense를 제공할 수 있습니다.

BindingContext 지정하기

MainPage.xaml.cs 파일을 아래와 같이 수정합니다.

[MainPage.xaml.cs]

namespace MyBookStore
{
    public partial class MainPage : ContentPage
    {
        public MainPage(BookListViewModel bookListViewModel)
        {
            InitializeComponent();
            BindingContext = bookListViewModel;
        }       
    }
}

BindingContext 의 역할 : BindingContext는 ContentPage의 속성으로, 데이터 바인딩의 소스가 되는 객체를 지정합니다. 위 코드는 MainPage의 데이터 바인딩 컨텍스트를 BookListViewModel 인스턴스로 설정하는 코드입니다. 이 설정을 통해 XAML 파일에서 정의된 UI 요소들이 BookListViewModel의 속성과 명령에 바인딩될 수 있습니다.
또한 MainPage 의 생성자를 통하여 BookListViewModel 의존성이 주입된 것을 확인할 수 있습니다.

데이터 바인딩을 통하여 페이지 타이틀 지정하기

간단하게 MVVM 패턴에서 제공하는 데이터바인딩 기능을 통하여 MainPage 의 타이틀을 지정하도록 해보겠습니다. MainPage.xaml 파일에 아래와 같이 한줄을 추가합니다.

[MainPage.xaml]

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MyBookStore.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:model="clr-namespace:MyBookStore.Models"
    xmlns:viewmodel="clr-namespace:MyBookStore.ViewModels"
    Title="{Binding Title}"
    x:DataType="viewmodel:BookListViewModel" />

추가된 부분은 Title=”{Binding Title}” 입니다.

Title 은 ContentPage의 제목을 설정합니다. 이 제목은 일반적으로 페이지의 상단에 표시됩니다.
{Binding Title}은 데이터 바인딩 표현식입니다.
BindingContext로 설정된 객체의 Title 속성에 바인딩됩니다.
이 설정을 통해 ContentPage의 제목이 BindingContext로 설정된 객체의 Title 속성 값에 따라 동적으로 변경됩니다.

BookListViewModel 의 생성자를 보면 아래와 같이 Title 속성에 값을 설정한 것을 확인할 수 있다.

[BookListViewModel.cs]

  public partial class BookListViewModel : BaseViewModel
  {
      private readonly BookService bookService;
      public ObservableCollection<Book> Books { get; set; } = new ObservableCollection<Book>();
      public BookListViewModel(BookService bookService) 
      {
          Title = "Book List";
          this.bookService = bookService;
      }

      [RelayCommand]
      public async Task LoadBooksAsync() 
      {
          if (IsLoading) return;
          try
          {
              if (Books.Any()) Books.Clear();
              var books = bookService.GetBooks();
              foreach(var book in books)
              {
                  Books.Add(book);
              }   
          }
          catch (Exception ex)
          {
              Debug.Write($"LoadBookAsync error: {ex.Message}");
              await Shell.Current.DisplayAlert("Error", ex.Message, "OK");    
          }
          finally
          {
              IsLoading = false;
          }            
          IsLoading = false;
      }
  }

프로그램을 실행해보면 아래와 같이 Title 이 “Book List” 로 표현되어 있는 것을 확인할 수 있습니다.

좋아요공감공유하기게시글 관

BindingContext 지정하기

데이터 바인딩을 통하여 페이지 타이틀 지정하기

Related Posts

댓글 달기 댓글 취소