<출처: 교보문고 - WPF MVVM 일주일 만에 배우기>
아주 빠르게 WPF를 살펴보기 위하여 선택하였다.
'일주일 만에 배우기'라는 표제에서 알수 있듯이 '대충? 빠르게!' 살펴볼 수 있게 구성되어, 가볍게(^^;) 읽어볼만 하다.
다만, 가끔 보이는 번역체의 문장이 이해를 다소 어렵게 하는 경우가 있다.
내친김에 WPF와 MVVM에 대하여 간략히 요약한다.
※ 책의 내용을 요약 혹은 리뷰하는 것이 아니라 'WPF를 빠르게 학습한 내용을 요약'하는 것이 목적입니다.
옮긴이 (금재용 님)의 블로그에 WPF 관련 글이 많이 있으니, 관심있으신 분들은 방문하셔서 함께 학습하셔도 좋겠습니다.
먼저, XAML과 WPF를 살펴보면서 궁금했던 것과 참고 자료를 정리한다.
▶ Winform과 WPF 는 어떻게 다른가?
- WinForm: 윈도우(Window)를 갖는 UI 프로그램을 간단히 만들수 있는 방법, 도구. (ex: 계산기)
- WPF (Windows Presentation Foundation): XAML (디자인/UI 구성) + C# (논리/기능 구현, Code Behind라 한다) + MVVM 모델 !!!
→ 만일, 안드로이드 앱을 개발해 본 경험이 있다면 WPF를 "Android Layout (XML)+ JAVA + 유연성과 추가 기능" 이라고 생각해도 좋겠다.
▶ Visual Studio와 Blend for Visual Studio은 어떤 관계인가?
- Visual Studio: 우리가 이미 알고 있는 프로그램 개발 도구. 당연히 'XAML과 C#을 편집, 빌드, 실행, 디버깅 등'을 할 수 있다.
- Blend for Visual Studio: XAML을 이용한 UI 디자인 및 시나리오를 정의하는데 최적화된 도구.
- 당연하지만 UI 구성시 Drag & Drop 방식의 Control 배치와 XAML 편집을 통한 Control 배치, 모두 가능하다.
※ XAML 내의 Control 들은 Android 구조 보다 훨씬 유연하다. 예를 들면 '각 Control들은 종류와 관계없이 서로 포함될 수 있다'
→ 로직 개발과 디자인 작업을 멋지게 분리한다. 그러나, 작은 프로젝트 혹은 전문 디자이너가 없다면 'Visual Studio만으로 XAML + C#을 개발하기에 충분'한 듯 싶다.
▶ XAML을 잘 이해하고 제대로 사용하는 것이 중요하다 !!!
- WOW~ XAML 관련 좋은 Tutorial을 발견했다. (LEARN XAML: https://www.tutorialspoint.com/xaml)
- 물론 Microsoft MSDN 사이트 에서도 XAML에서 사용할 수 있는 Control들을 잘 소개하고 있다.
※ XAML로 작성한 개발 View들은 마치 HTML 처럼 '탐색/전환 할 수 있다.'
▶ MSDN은 XAML, WPF를 학습하기 위한 좋은 교과서 !!!
- 사용자 인터페이스 디자인: Visual Studio, Blend for Visual Studio를 이용한 XAML 편집 및 사용자 UI 디자인
- Windows Presentation Foundation: WPF를 이용한 Windows Application 개발
이제, XAML의 구조와 동작에 대하여 학습한 내용을 키워드 중심으로 메모한다.
▶ XAML 관련 용어 정리
- xmlns: C#의 using 키워드와 같은 개념이다.
▶ XAML의 객체, 속성과 C# 코드의 관계
- XAML에 '객체, 속성 정의 및 설정' 을 추가한 것은 C#으로 '객체 생성, 속성에 값 저정'하는 것과 동일하다.
- XAML의 객체를 다른 곳에서 참조하고 싶을 경우 'x:Name = xxx'형식으로 이름을 지정한다.
- XAML에서 MouseLeftButtonDown과 같은 event를 위한 '이벤트 함수'를 등록할 수 있다.
※ 역시 Android의 Layout (XML)의 특징과 유사하다. 그리고, XAML도 C#과 유사한 언어라고 생각하는 것도 좋겠다.
▶ Canvas, Panel, DockPanel, Grid 등을 이용하여 Control들의 화면 배치를 정의한다.
- MSDN 자료를 link한다 (https://docs.microsoft.com/ko-kr/windows/uwp/design/layout/layouts-with-xaml)
※ 물론, 앞서 설명한 Tutorial 문서 등을 통해서도 살펴볼 수 있으나, 위 link와 그 안에 포함된 sub link들을 통해 여러 예제와 함께 학습할 수 있다.
데이터 바인딩 (Data Binding) - 제대로 알고 사용해야 하기에 별도로 정리한다.
역시, 키워드 중심이며 '앞서 소개한 Reference 등으로 정확히 이해하고 사용해야 한다.
▶ WPF에서 데이터 바인딩(Data Binding)이란?
- 아래 링크를 통해 꼭꼭꼭 개념을 명확히 해야 한다. 심지어 한글로 설명하고 있다.
- 데이터 바인딩 (WPF): https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/data/data-binding-wpf
- 바인딩되는 데이터는 '특성 속성(객체)의 멤버변수 (ElementName을 이용), 데이터 컨텍스트와 관련된 값, 리소스로 정의된 것' 등이 있다.
- 바인딩 방향은 'One-Way (일방향 반영)', 'Two-Way (양방향 반영)'이 있다. 서로 연결되어 반응하는 개념이 참 편리하다.
심지어, IValueConverter Interface를 상속/이용하여, 'Color와 같은 문자열 값을 Brush 등의 관련 속성값으로 자동변경'할 수 있다.
- INotifyPropertyChagned 인터페이스를 구현하고 Setter에서 OnPropertyChanged()를 호출하여, C# 코드에서 변수를 변경할 경우 'Binding 된 Control에 통지/적용'할 수 있다.
- INotifyCollectionChagned 인터페이스를 이용하여. Collection Binding (통지)시 '변경된 내용만 통지'할 수 있다. 이때 'ObservableCollection<T>'를 이용하여 보다 편리하게 적용할 수 있다.
- IEnumerable을 지원하는 ItemSource 속성으로 Data Collection도 Binding할 수 있다.
- ListBox는 ItemPanel(각 항목의 배치 방법), ItemTemplate(항목들의 개별 모양), ItemContainerStyle (마우스 동작에 따른 효과), Template (컨트롤 자체의 모양)을 지정하여 사용할 수 있다.
- 개발자의 책임하에 사용한다. NULL 체크 등 Validation 없이 binding한다. 이때 'System.Data Errror 관련 메시지'를 확인할 수 있다.
※ 중요한 내용이므로, 별도 요약없이 위 링크로 대신한다.
특히, 잘 못 사용하면 오동작 혹은 Memory Leak 등이 발생할 수 있으니, 꼭 이해하고 사용해야 한다.
기타, WPF와 Control 들에 대한 팁(Tips) - 예제 등을 봐야 보다 명확하므로, 키워드를 본 후 모르는 내용이면
'앞서 설명한 Reference' 혹은 검색 등으로 관련 예제와 함께 살펴본다.
▶ 템플릿 (Template)를 이용하여, 컨트롤의 모양을 변경할 수 있다.
- 이때, ControlTemplate 속성으로 원하는 TargetType (예: Button)을 설정한다.
- TemplateBinding을 이용하면, TargetType의 세부 속성을 One-Way Binding과 같이 설정할 수 있으므로 더 유연하다.
※ TemplateBinding 개념이 좀 어렵다. T.T : https://mhchoi8423.tistory.com/1 이렇다고 하는데, 좀더 공부를 해야 할 것 같다. @.@
※ 스타일 (Style)을 이용하면, 컨트롤의 모양을 보다 유연하게 변경할 수 있다.
※ 이러한 내용들을 하나의 테마 (Theme)으로 묶어서 사용하면, 디자이너 ↔ 개발자 협업을 더 독립적/원활히 할 수 있다.
▶ Transform과 Control 상태에 따른 동작(속성)도 지원한다.
- RenderTransform과 LayoutTransform을 메모한다.
역시, MSDN (https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/graphics-multimedia/transforms-overview)
- StoryBoard도 메모한다. 역시, MSDN.
(https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/graphics-multimedia/how-to-animate-a-property-by-using-a-storyboard)
▶ 리소스를 이용하여 만들어 놓은 정보(데이터, 템플릿)를 공유하여 사용한다.
- 리소스는 3가지 방법으로 저장할 수 있다: 화면 (단일 화면에서 사용), 애플리케이션 (App.xaml, Application 전반에 사용할 것),
리소스 사전 (Resource dictionaries, xaml로 만들고 source로 지정하여 사용한다.)
- x:Key="xxx"와 같은 형식으로 재사용할 리소스의 이름을 지정한다.
- 리소스 지정방식: StaticResource (일반적으로 사용), DynamicResource (다른 리소스로 변경시 즉시 반영).
마지막으로, MVVM 모델을 간단히 살펴본다.
▶ WPF의 MVC (Model View Controler)를 아래와 같이 설명할 수 있다.
- Model: data class로 INotifyPropertyChanged() 혹은 INotifyCollectionChagned()를 구현하여 View와 연결된다.
- View: XAML로 구성된 UI
- Controller: Command, Trigger, Event 등.
▶ MVVM은 'Model, View, ViewModel)이다.
- View의 입력은 Command로 ViewModel로 전달된다.
- ViewModel은 필요한 데이터를 Model에 요청하고, Model은 데이터를 ViewModel에 제공한다.
이때, ViewMdoel은 전달받은 데이터를 가공하고 저장한다.
- View는 ViewModel과 Data Binding되어 있으므로, 자동으로 갱신된다.
※ 오호! Biding이 나온다.
▶ WPF에 MVVM을 적용하는 Best Practics
- ViewModel과 ViewModel이 제공해야 하는 속성 및 메소드를 설계/정의 한다.
- Notify (Event) 속성을 정의/구현한다.
- View와 ViewModel을 Binding 한다. 즉, View의 DataContext로 ViewModel을 지정한다.
- 필요에 따라 View가 ViewModel의 메소드를 호출할 수 있도록 Trigger를 설정한다.
- 그리고, 필요한 기능을 구현한다.
※ View가 생성될때 DataContext로 지정된 ViewModel도 함께 생성된다. 동적 생성을 위해 Code내에서 DataContext를 지정할 수도 있다.
※ ICommand Interface를 이용하여, Button등의 Command 속성과 연결/사용할 수 있다. (Delegation을 이용할 수도 있다고 한다.)
※ System.Windows.Interactivity.dll과 Method를 이용하여 보다 쉽게 이벤트 트리거를 연결/구성할 수 있다.
▶ 결론: 분리해라! 간결하게 해라!.
XAML을 이용하여 Mobile App등도 개발 할 수 있다고 한다.
볼수록 재미있는데, 사용할 수도록 정확히 알고 써야 한다는 압박이 커간다. ^^
'DevSmile 하는 일 > 소프트웨어 개발' 카테고리의 다른 글
| 리엑트를 공부해 보자~ (0) | 2023.07.26 |
|---|
