6일차. 데이터 바인딩 (2/2)

2. BookstoreViewModel 뷰모델 생성

   MVVM(Model-View-ViewModel) 중에서 두 번째로 뷰모델을 생성하겠습니다. 뷰모델을 생성할 때도 모델과 마찬가지로 먼저 idl을 생성하고, 빌드한 후 생성된 .h .cpp 스텁 파일을 이용하여 구현합니다. 이 부분은 예제를 따라하시면 되므로 생략하겠습니다.

 

생성된 BookstoreViewModel.h 스텁 파일

   마찬가지로 static_assert는 지워주고 생성자에서 = default도 삭제합니다. 그리고 private 멤버에 m_bookSku를 생성해 줍니다.

 

수정된 BookstoreViewModel.h

 

 

 

 

생성된 BookstoreViewModel.cpp 스텁 파일

   cpp도 수정해 줍시다. 이제 더 말하면 입아플 것 같은 static_assert를 지우고, BookstoreViewModel 생성자를 추가해 줍니다. 생성자 안에서는 m_bookSku를 초기화해주는데, 이때 값은 "Attricus"로 지정합니다. 그리고 BookSku 메서드를 호출하면 m_bookSku를 반환하도록 해줍니다.

 

수정된 BookstoreViewModel.cpp

   아직은 로직이 간단하기 때문에 코드가 복잡하지 않습니다.

 

 

3. BookstoreViewModel을 MainPage에 추가

MainPage.idl 수정 전

MainPage.idl 수정 후

   먼저, MainPage.idl을 수정해 줍니다. Int32 MyProperty; 부분을 지우고 뷰모델을 추가해줍니다. 그리고 빌드하면 이전과 마찬가지로 빌드에 실패하지만, 괜찮습니다. 빌드하고 스텁 파일을 가져와서 수정해도 되고 직접 수정해도 됩니다. 

 

수정된 MainPage.h

   MainPage.h먼저 봅시다. 헤더 파일에는 MainViewModel이라는 메서드가 추가되었고, m_mainViewModel 변수가 private 멤버로 추가되었습니다. 예제에는 m_mainViewModel 뒤에 { nullptr }로 초기화를 해 주지만, C++/WinRT 2.0에서 추가된 유니폼 생성자(uniform construction)이라는 기능이 추가되어 필요가 없어졌습니다. 또한 cpp에서 구술한 winrt::make도 필요가 없어졌죠. winrt::make는 매개 변수로 넘어오는 타입이 존재할 경우 해당 타입으로 반환해주는 팩토리 메서드입니다.

 

 

수정된 MainPage.cpp

예제에는 m_mainViewModel = winrt::make<Bookstore::implementation::BookstoreViewModel>();라는 코드가 존재하지만, 위에서 말한 대로 유니폼 생성자가 생겼기 때문에 필요가 없어졌기 때문에 삭제하였습니다. ClickHandler가 실행되면 MainViewModel()의 BookSku()의 Title을 "To Kill a Mockingbird"로 수정합니다. MainViewModel() 메서드는 private 멤버인 m_mainViewModel에 대한 접근자를 제공합니다.

 

4. 버튼에 데이터 바인딩

   MVVM 중 가장 마지막으로 View(XAML)를 수정해보겠습니다. 버튼에 바인딩하는 방법은 간단합니다. 위에서 소개한 {x:Bind}를 사용하면 되죠. 버튼의 내용을 MainPage에서 선언한 뷰모델에 바인딩을 한 후, 모드는 OneWay로 설정해 줍니다. OneWay 모드는 원본 속성이 변경될 때만 속성이 업데이트됩니다. OneWay와 관련된 내용은 바인딩 방향 지정 문서(링크)를 참고하세요. 따라서 아래와 같이 작성해 주시면 됩니다. 버튼을 클릭하면 MainPage에서 선언된 ClickHandler가 작동되고, 버튼의 내용은 MainPage에서 선언된 MainViewModel의 BookSku.Title과 바인딩됩니다. 이제 실행해 봅시다.

<Button Click="ClickHandler" Content="{x:Bind MainViewModel.BookSku.Title, Mode=OneWay}"/>

 

버튼 클릭 전

   처음에 실행할 땐, 뷰모델에서 BookSku를 생성할 때 매개변수로 준 "Atticus"가 버튼의 컨텐츠로 들어가 있습니다. 그럼 이 버튼을 누르면 어떻게 될까요? 뷰를 직접 컨트롤하지 않고 뷰모델의 데이터를 갱신하는 것 만으로 뷰도 갱신이 될까요?

 

버튼 클릭 후

   네! 잘 됩니다!

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/cpp-and-winrt-apis/binding-property

XAML 컨트롤, C++/WinRT 속성에 바인딩 - UWP applications

docs.microsoft.com/ko-kr/windows/uwp/data-binding/

데이터 바인딩 - UWP applications