Xamarin의 MVVM 패턴 사용하기

안녕하세요 씨앤텍시스템즈입니다.

이번 포스팅은 Xamarin.Forms 개발시 기본적으로 필요한 MVVM 패턴 사용법에 대해서 알아보도록 하겠습니다.

1. MVVM 패턴이란?

MVVM은 Model – View – ViewModel의 약자로 응용프로그램의 비즈니스 및 presentation logic을 UI와 완전히 분리할 수 있도록 도와줍니다. 응용프로그램의 Logic과 UI를 명확하게 분리하면 많은 개발적인 문제를 해결할 수 있고 응용프로그램을 더 쉽게 테스트할 수 있으며 유지관리 하기에 용이합니다. 그리고 코드 재사용성을 크게 향상시킬 수 있으며 개발자와 UI 디자이너는 앱의 각 부분을 개발할 때 쉽게 공동 작업을 수행할 수 있습니다.

- View: 사용자가 화면에서 볼 수 있는 구조, 레이아웃 및 모양을 정의하는 작업을 담당합니다. 이곳에는 비즈니스 logic을 포함하지 않고 XAML로 정의하는 것이 가장 좋습니다. 하지만 XAML로 표현하기 어려운 시각적 동작 구현시 Code behind에 작성할 수 있습니다.

- ViewModel: View가 데이터 바인딩할 수 있는 속성 및 명령을 구현하고 변경 알림 이벤트를 통해 상태 변경을 View에 알립니다. ViewModel은 필요한 모델 클래스와 View의 상호 작용을 Control해야합니다.

- Model: 응용 프로그램의 데이터를 캡슐화 하는 비시각적 클래스입니다. 따라서 Model은 일반적으로 비즈니스 및 유효성 검사 Logic과 함께 데이터 모델을 포함하는 앱의 도메인 모델을 나타내는 것으로 볼 수 있습니다. Model Object의 예로는 DTO, POCOs 및 생성된 엔터티 및 프록시 Object가 있습니다.

2. View와 ViewModel 연결

ViewModel은 DataBinding 기능을 사용하여 View에 연결할 수 있습니다. 연결하는 방법에 대해서는 그림을 보면서 설명드리겠습니다.

A. 프로젝트 생성

프로젝트를 생성해주는데 프로젝트의 이름은 BindingTest로 하겠습니다.

템플릿 종류는 비어 있음으로 선택을 해서 생성하겠습니다.

위의 사진과 같은 화면이 나오면 프로젝트가 완료된 것입니다.

B. ViewModel 생성하기

위의 사진처럼 ViweModel이라는 폴더를 생성하고 하위에 Notify라는 클래스 파일을 하나 만들어줍니다.

생성된 Notify 클래스에 위의 소스를 작성해줍니다. 이것은 바인딩된 Property의 값이 변경되었을 때 View에 알림을 보내기 위한 소스입니다. 파라미터로는 Property의 이름을 받습니다. 타입은 string입니다.

그리고 위의 사진처럼 MainPage.xaml에 바인딩할 ViewModel 클래스를 만들어 줍니다. ViewModel 클래스의 이름을 만들 때 View의 이름 뒤에 ViewModel을 붙여주겠습니다.

생성된 MainPageViewModel 클래스에는 아래와 같은 소스를 작성해줍니다.

위의 소스에서 바로 전에 만들었던 Notify라는 클래스를 상속했습니다. 이유는 다들 아시겠지만 소스 중간에 보이는 OnPropertyChanged라는 메소드는 Property값이 변경될 때마다 View에 알려주는 것으로 ViewModel에서는 공통적으로 사용되기 때문에 클래스를 따로 만들어서 상속을 하게 된 겁니다. 그리고 추가되는 속성들 중 View와 Binding되는 속성들은 모두 위와 같이 Value값이 셋팅되는 곳에서 OnPropertyChanged 메소드를 호출해주어야만 합니다.

_content라는 변수는 string값을 담을 변수이고 _btnCommand는 이벤트와 연결하기 위한 변수입니다. _btnCommand와 같은 이벤트와 연결하는 변수는 Property에서 OnPropertyChanged를 호출하지 않아도 됩니다. 그리고 _btnCommand에 Command클래스 객체로 ViewModel에 있는 메소드를 담아서 넣어줍니다.

C. Binding

앞에서 만든 ViewModel 클래스를 View에 Binding을 해줄 겁니다. View의 상단에 ViewModel의 NameSpace를 추가해줍니다. 이름은 ViewModel이기 때문에 vm으로 합니다.

ViewModel의 참조경로를 추가한 후 ContentPage에 앞에서 만들었던 MainPageViewModel 클래스를 바인딩 해줍니다.

그리고 화면에는 라벨과 버튼을 표현해서 버튼을 눌렀을 때 라벨에 “Binding 성공!!” 이라는 내용이 나오도록 할 것입니다. 아래 사진을 참고해주세요.

컨트롤들을 화면에 모두 추가했다면 ViewModel에 있는 Property를 연결해 주겠습니다.

위의 그림에서 바인딩을 할 때는 해당 컨트롤의 속성에 “Binding”이라는 단어를 사용하여 바인딩을 해줍니다. Label에는 Text속성에 Content를 바인딩하여 ViewModel의 Content의 값이 변경될 경우 변경된 값을 넣어주도록 바인딩 되었습니다. Button은 Command라는 속성에 BtnCommand를 바인딩하여 Button의 Click 이벤트시 ViewModel의 BtnCommand를 실행하도록 바인딩 되었습니다.

D. 실행

앞의 절차를 모두 마친 후 실행하여 입력버튼을 눌러보면 아래 그림과 같이 나오게 됩니다.

전체적인 프로그램의 흐름을 정리해자면 BtnCommand를 바인딩한 입력버튼을 누르게 되면 BtnCommand의 객체 생성시 Parameter로 넣어줬던 Button_Clicked라는 메소드가 실행되게 됩니다. Button_Clicked라는 메소드에는 Content라는 Property에 “Binding 성공!!”이라는 값을 넣게 되고 Content라는 Property의 값이 Setting 된 후 OnPropertyChanged메소드를 호출하여 Content의 값이 변경된 것을 View에 바인딩된 Label에 알려주면서 Label에는 변경된 최신 값을 보여주게 됩니다.