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

   데이터 바인딩(Data Binding)은 MVVM 패턴을 구성하는 핵심 요소 중 하나입니다. View는 View Model을 관찰하며  데이터가 변경되면 뷰 내의 데이터도 변경하는데, 이 관찰에 대한 방법입니다. View와 View Model간의 결합도를 낮추고 각각의 응집도를 높히기 위해 나온 기술인 것입니다. 최신 GUI 프레임워크에서는 대부분이 지원합니다. 닷넷 프레임워크에서는 이 데이터 바인딩이란 것을 거의 필수로 사용합니다.

 

   데이터 바인딩에서는 '관찰 가능한(Observable)' 속성(Property)이란 말을 자주 사용하는데, 관찰 가능한이란 뜻은 INotifyPropertyChanged::PropertyChanged 이벤트를 발생실 수 있는 속성이란 의미로 해당 속성은 값이 변경될 때 발생하게 되고, 이를 뷰에서 관찰하고 있다가 이벤트가 발생되면 상태를 수정하게 됩니다. 아마 WPF를 사용해보신 분들은 매우 친숙할 것으로 예상됩니다.

 

 

{x:Bind}와 {Binding}

   UWP에서 데이터를 바인딩하는 방법은 {x:Bind}를 사용 방법과 {Binding}을 사용하는 방법이 있습니다. 둘은 기능적으로 거의 비슷합니다. {x:Bind}는 윈도우 10에서 새로 나왔으며 {Binding}을 대체하기 위한 태그입니다. {Binding}의 기본 바인딩 모드은 OneWay입니다. 이는 연결 및 변경 감지 처리에 더 많은 코드를 생성됩니다. {x:Bind}의 기본 바인딩 모드는 OneTime으로 응용 프로그램이 시작되거나 데이터 컨텍스트가 변경될 때만 대상을 업데이트하므로 성능상 {x:Bind}가 낫습니다. 또한 {x:Bind}는 컴파일 타임에 코드가 생성되기 때문에 컴파일된 바인딩이라 부르기도 합니다. 컴파일하기 때문에 속도가 빠르고, 코드의 유효성 검사도 가능해집니다. 마이크로소프트는 {Binding}보다는 {x:Bind}를 사용하는 것을 추천하고 있습니다. 이에 대한 내용은 바인딩 방향 문서(링크)에 있습니다. 일반적으로는 {x:BInd}를, {x:Bind}를 사용할 수 없는 요소일 경우 {Binding}를 사용하는 것을 추천드립니다.

 

 

예제 만들어보기

새 프로젝트 구성

   WinRT 문서의 바인딩 예제를 따라해 보겠습니다. 문서를 차근차근 읽으면서 따라한다면 문제 없이 진행될 것으로 예상됩니다. 먼저 Bookstore라는 이름의 Blank App을 만들어 줍니다. 이때 '솔루션 및 프로젝트를 같은 디렉터리에 배치' 옵션을 반드시 해제해 주어야 합니다. 예제는 먼저 BookSku라는 모델 클래스를 만든 후, BookstoreViewModel이라는 뷰모델을 만들고 버튼에 바인딩하는 순서로 되어있습니다.

 

 

1. BookSku 모델 생성

   가장 먼저 MVVM(Model-View-ViewModel)중에서 모델(Model)을 생성해줍시다. 프로젝트에 'MIDL 파일(.idl)'을 추가해 줍니다. (코드 탭에 있습니다) 이때 이름은 BookSku.idl로 해 줍니다. 파일이 생성되면  "oaidl.idl"과 "ocidl.idl"이 포함되어 있는데 지우고 예제 코드를 입력해 줍니다.

BookSku.idl

// BookSku.idl
namespace Bookstore
{
    runtimeclass BookSku : Windows.UI.Xaml.Data.INotifyPropertyChanged
    {
        BookSku(String title);
        String Title;
    }
}

 

   입력이 끝났다면 프로젝트를 빌드해 줍니다. 빌드를 해주면 에러가 날 텐데, 무시해 줍니다. 에러가 나는 게 당연한 겁니다. 이제 프로젝트의 .\Bookstore\Bookstore\Debug\Unmerged 폴더로 들어가 봅시다. BookSku.winmd 파일이 존재하나요? 2일차 내용을 떠올려 봅시다. 그때 idl을 참고해 winrt 메타데이터(winmd)를 생성하고, 빌드시 이 파일을 참조하여 빌드하게 된다고 했었습니다. 사실 그 사이에는 단계가 더 있습니다. winmd가 생성된 후 cppwinrt.exe가 실행되어 런타임 클래스를 작성하거나 사용할 수 있도록 원본 코드 파일을 생성해 줍니다. 소프트웨어 테스트를 공부하신 분들이라면 많이 들어보셨을 그 스텁 파일이 생성됩니다. 파일 자체에는 큰 의미가 없지만, 선언을 간소화하고 바로 구현에 들어갈 수 있습니다. 그 스텁 파일을 프로젝트에 포함하여 사옹해 봅시다.

   .\Bookstore\Bookstore\Generated Files\sources에 들어가면 BookSku.h와 BookSku.cpp가 생성되어 있습니다. 이 파일을 App이나 MainPage 파일들이 존재하는 \Bookstore\Bookstore로 복사합니다. 그리고 5일차 PhotoLab을 만들면서 이미지 파일을 프로젝트에 포함시켰던 것 처럼 솔루션 탐색기에서 '모든 파일 표시'를 활성화해 BookSku.h와 BookSku.cpp를 프로젝트에 포함시켜 줍니다. 이제 본격적으로 구현해 봅시다.

   

생성된 BookSku.h 스텁 파일

   방금 복사하고 프로젝트에 포함시켰던 파일을 열어보면 위와 같이 나옵니다. 여기서 맨 위에 에러가 뜨는 static_assert는 삭제해줍니다. 내려가서 BookSku의 생성자가 default로 지정되어 있는데 이를 delete로 변경합니다. 모델의 기본 생성자는 필요가 없습니다. 다음으로는 Title 변수를 private 멤버로 생성해 줍니다. 마지막으로 Title 변수가 변경될 때 발생되는 이벤트에 대한 것도 priavte 멤버로 추가해 줍니다. 따라서 코드는 아래와 같이 됩니다.

 

수정된 BookSku.h

 

생성된 BookSku.cpp 스텁 파일

   다음은 BookSku.cpp를 예제처럼 수정해 줍니다. 기본적으로 생성된 파일은 위와 같습니다. 여기도 마찬가지로 static_assert를 지워줍니다. 예외 반환도 지금은 필요 없으니 다 지워줍니다. 생성자는 받는 title hstring을 헤더 파일에 선언한 m_title로 넘겨주도록 수정하고 Title() 메서드는 m_title을 반환하도록 수정, Title(value)는 m_title에 저장하는데, 넘어온 값이 기존의 m_title과 같지 않을 때만 저장하고, 변경 이벤트를 호출합니다. 해당 내용을 제대로 이해하려면 대리자(Delegate)를 알아야 하므로 일단은 넘어가겠습니다.

 

수정된 BookSku.cpp

   예제와 같이 수정하였습니다.

 

 

참고

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