WPF - MVVM (Model View ViewModel) 환율변환기
비트교육센터 고급과정 WPF를 끝으로 모든 수업이 끝났습니다. 워크샵도 다녀왔고 이제 다음주 부터는 팀프로젝트를 통한 협업을 진행합니다.. 많이 걱정도 되지만 좋은결과있었으면 좋겠습니다. 그럼 본문 내용 시작합니다.
디자이너는 View에 집중적으로 관심을가지며 디자인하고, 개발자는 로직, 내부에 집중적으로 관심을 가지며 개발을 해서 둘의 협업이 효율적으로 해주는 WPF(XAML,C#)에서 다시 유지보수가 쉽게하며, 설계자가 개발자가 올바른 코딩을 했는지 빠르게 확인할 수 있게 해주는 WVVM에 대해 알아봅시다.
WVVM은 모델, 뷰, 뷰모델 이라는 뜻으로.. 간단히 말해서 화면에 표시할 뷰(UI)와 뷰에 표시되는 모델을 뷰모델이라고한다.
WPF에서 뷰는 XAML로만 작성이 되어있고 DataContext로 뷰모델을 지정하는 것이다. 이는 화면에 표시될 것과 내부적으로 모델에대한 소스를 분리하면서 개발자과 디자이너의 관심사가 나누어짐으로써 효율적인 협업이 이루어지도록 도울 수 있습니다. (아직 필자도 MVVM에 대해 미숙하기에 계속해서 공부할 예정입니다.)
MVVM에 대한 간단한 예제를 실습해 보았습니다. 바로 유로를 여러가지 다른 화폐로 환전해서 측정해주는 프로그램입니다.
제가 학습했던 책에서는 다음과 같이 MVVM을 구축하는 단계를 권장하고 있습니다.
- 뷰모델을 생성한다.
- 노출시킬 뷰모델의 속성을 파악한다.
- 알림 속성을 코딩한다. (Notify)
- 뷰모델을 뷰의 DataContext로 설정한다.
- 뷰를 뷰모델에 데이터 바인딩한다.
- 기능적인 로직을 코딩한다. (3번 단계 이후 언제든지 가능)
ViewModel 생성
그리고 노출시킬 속성들을. 즉 노출시킬 변수들을 파악한 후에 프로퍼티를 만들어줍니다. (프로퍼티가 있어야 바인딩이 가능하기 때문이죠.) 속성들에 대해서는 게터, 세터, 체인지 이벤트가 전부이므로 간략화 해놓았습니다.
코드 알림 속성
코드 알림속성은 우리가 실습에서 쓰던 Notifier로 구현합니다. Notifier는 INotifyPropertyChanged 인터페이스를 구현하고 있기 때문에 프로퍼티 변경사항에 대해서 편하게 코딩이 가능합니다.
그리고 현 예제에서 필요한 간단한 Currency(통화) 클래스입니다. 멤버로는 생성자와, 통화이름(달러 등), 환율이 전부입니다.
그리고 유로화를 다른 통화로 환전하기 위해서 배열 Currenies를 멤버로 가지고 속성을 만들어줍니다. 이 때 뷰모델의 기본생성자에서는 Currencies를 기본적으로 생성해주는 것을 확인할 수 있습니다.
코드설명: 111번째 라인의 매서드(온유로체인지)는 41번째 라인에 있던 Euros속성에 setter부분에서 실행될 매서드입니다. 마찬가지로 OnSelectedChanged또한 65번째 라인의 SelectedCurrncy의 setter가 변경되면 발생할 매서드입니다.
그리고 그 두개의 매서드가 동일하게 내부에서 ComputeConverted() 매서드를 호출하게됩니다. ComputeConverted에서는 선택된 통화가 있다면 그에 맞는 환전가격을 계산해서 Convrted에 설정해주는 기능을 구현합니다.
C#코드는 이게 전부입니다. 간단하죠? 그럼이제 XAML(재믈)코드를 한번 보도록 합시다.
XAML코드
재믈코드도 사실간단합니다. 나머지 부분은 기본적인 내용이므로 생략하고 중요한 부분인 바인딩에 집중적으로 설명하도록하겠습니다.
11~13라인: 현 페이지의 DataContext를 아까 작성한 뷰모델 클래스로 설정합니다. 위 코드에서는 재믈코드에서 직접 뷰모델객체를 생성해서 사용해주는 것을 알 수 있습니다.
17라인: 우리가 입력해줄 텍스트박스는 Euros와 바인딩 시킵니다.
19,20라인: Converted와 ResultText를 바인딩 시키면서 환전된 값을 보여주도록 합니다.
21~26라인: 콤보박스에서는 어떤 통화로 변환할지를 선택할 수 있게 아까 위에서 정의해준 Currencies배열을 ItemSource로 사용하며, SelectedItem은 역시 SelectedCurrency로 설정하므로써 사용자가 설정한 통화가 바로바로 바인딩되게 해줍니다. 보다 편리한 선택을 위해서 DataTemplate를 통화이름인 Title로 설정해주었습니다.
위와 같은 간단한 MVVM코딩을 진행해보았는데요? 위와같이 코드 내부에서 새로운 통화를 추가하는 모습을 보면 쉬운 유지보수가 가능하다는 것을 알 수 있습니다. 역시 문법만 익혀서 되는 것이 아니라 어떻게 내부의 논리적인 설계를 하는것이 향후 업데이트나 관리에 있어서 더 효율적일지 고민하는 것이 중요하다는 것을 다시한번 깨닫게되었고, WVVM모델의 편리함도 알 수 있었던 것 같습니다.
BikeShop - 9.zip'C#(.NET) > WPF' 카테고리의 다른 글
| WPF 실습#5 - DataGrid Binding (2) | 2018.05.05 |
|---|---|
| C# .net WPF끝내기 - 실습#4 (Collection Binding, 리스트바인딩) (0) | 2018.05.05 |
| WPF 사실상 3일만에 끝내기 - 실습#3 (ItemTemplate) (0) | 2018.04.30 |
| WPF 1주일만에 끝내기 - 실습 #2 NavigationService.Navigate (0) | 2018.04.29 |
| WPF MVVM 7일만에 배우기 - 실습#1 (page) (0) | 2018.04.29 |