MVVM 패턴의 이해

Size: px

Start display at page:

Download "MVVM 패턴의 이해"

보석 미
5 years ago
Views:

Seo Hero 요약 joshua227.tistory. 2014 년 5 월 13 일 이문서는 WPF 어플리케이션개발에필요한 MVVM 패턴에대한내용을담고있다. 1. Model-View-ViewModel 1.1 기본개념 MVVM 모델은 MVC(Model-View-Contorl) 패턴에서출발했다.

1 Seo Hero 요약 joshua227.tistory 년 5 월 13 일 이문서는 WPF 어플리케이션개발에필요한 MVVM 패턴에대한내용을담고있다. 1. Model-View-ViewModel 1.1 기본개념 MVVM 모델은 MVC(Model-View-Contorl) 패턴에서출발했다. MVC 패턴은전체 project 를 model, view 로나누어 data 와 user interface 를분리하고, 제어를 control 에서하겠다는생각에서나왔다. 하지만 view 와 control 을완전히분리하기는힘들었고, project 가커지면서그경계가모호하게되는경우가많았다. 이에대한대안으로 MVP(Model-View-Presenter), view 와 view 의상태를분리하는 PM(Presentation Model) 등이새롭게등장하였다. MVVM 은 WPF 를위해기존모델들을수정하고 새롭게 ViewModel 을정의하였다. Dept. of Computer Science & Engineering 1/7

2 Model 과 View 를완전히분리하고그사이에 view 의추상화인 ViewModel 이데이터 바인딩을통해느슨하게서로를연결한다. ViewModel 의속성값이변경되면이러한새값이 데이터바인딩을통해자동으로 View 로전파된다. 사용자가 View 의단추를클릭하면요청된작업을수행하기위해 ViewModel 에있는명령이 실행된다. ViewModel 은모델데이터에대한모든수정을수행하며 View 는이러한작업을 수행하지않는다. View class 는 Model class 가존재한다는것을알수없으며 ViewModel 과 Model 은 View 를 인식하지못한다. 실제로 Model 은 ViewModel 와 View 가존재한다는사실을전혀알수없다. 1.2 Model As in the classic MVC pattern, the Model refers to either: 1) An object model that represents the real state content (an object-oriented approach), ( 컨텐츠를표현하는 object 모델 ) 2) The data access layer that represents the content (a data-centric approach). ( 컨텐츠를표현하는 data access layer) 1.3 View As in the classic MVC pattern, the View refers to all elements displayed by the GUI such as buttons, windows, graphics, and other controls. 1.4 ViewModel The ViewModel is a "Model of the View" meaning it is an abstraction of the View that also serves in data binding between the View and the Model. It could be seen as a specialized aspect of what would be a Controller (in the MVC pattern) that acts as a data binder/converter that changes Model information into View information and passes commands from the View into the Model. The ViewModel exposes public properties, commands, and abstractions. The ViewModel has been likened to a conceptual state of the data as opposed to the real state of the data in the Model. Dept. of Computer Science & Engineering 2/7

(view 의추상화로 MVC 패턴에서 Controller 에해당한다.) 2. 예제 2.1 WPF Model-View-ViewModel WPF 프로젝트에서 MVVM 모델을쓰기위해서는 Model, View 를연결하기위한 ViewModel 이 필요하다. 그리고여기에는사용자가입력을주었을때, 해당하는기능을실행하는 command 가 구현되어있어야한다.

3 (view 의추상화로 MVC 패턴에서 Controller 에해당한다.) 2. 예제 2.1 WPF Model-View-ViewModel WPF 프로젝트에서 MVVM 모델을쓰기위해서는 Model, View 를연결하기위한 ViewModel 이 필요하다. 그리고여기에는사용자가입력을주었을때, 해당하는기능을실행하는 command 가 구현되어있어야한다. MVVM 모델의기본템플릿을지원하는 toolkit 을설치하거나직접필요한항목을만들고 템플릿으로저장하여쓸수있다. 아래는일반적인 MVVM 모델의구성요소이다. Commands 와 ViewModels 폴더안에있는파일은기본적으로는수정할필요가없다. MainViewModel.cs 파일에 view 와 model 을제어하기위한내용이들어간다. MainWindow.xaml 은 화면을구성하는 View 가된다. 2.2 예제구성 화면에보이는 text box 에숫자를출력한다. + 와 버튼이있으며 + 버튼을누르면숫자가 올라가고, - 버튼을누르면 text box 에숫자가줄어든다. 숫자가 10 이되면 max 가되며숫자를출력하는 text box 옆에 max 를표시한다. 반대로 숫자가계속줄어들어 0 이되면 min 이되며 text box 에 min 이표시된다. Dept. of Computer Science & Engineering 3/7 SM 사업부

4 전체프로젝트에대한클래스구성은아래와같다. 1) Model 숫자정보를저장하는 Score class 는전체프로젝트에서 Model 에해당한다. 정보에는숫자 값인 score, 최대인지최소인지를나타내기위한 max, min 이있다. Dept. of Computer Science & Engineering 4/7 SM 사업부

3) ViewModel MainViewModel class 가화면을제어하는 ViewModel 이된다.

5 2) View View 는 xaml 로작성되기때문에 class diagram 에는자세한정보가나타나지않는다. 아래는 MainWindow.xaml 정보를나타낸다. 위내용을자세히보면 text box 에는 Text={Binding}, 버튼에는 Command 가있다. View 에 대해서데이터와명령이바인딩되어있기때문에 View 와 Model 의분리가가능하다. 3) ViewModel MainViewModel class 가화면을제어하는 ViewModel 이된다. MainViewModel class 는 ViewModelBase class 를상속받아 Command 를제어하고 property 에대해데이터바인딩을할수있다. 2.3 예제코드 1) MainWindow.xaml View Dept. of Computer Science & Engineering 5/7 SM 사업부

6 2) Models Score.cs 3) ViewModels MainViewModel.cs Dept. of Computer Science & Engineering 6/7 SM 사업부

7 3. References 1) Model-View-ViewModel 디자인패턴을사용한 WPF 응용프로그램 2) A Practical Quick-start Tutorial on MVVM in WPF in-wpf 3) WPF Model-View-ViewModel Toolkit Dept. of Computer Science & Engineering 7/7

제8장 자바 GUI 프로그래밍 II

제8장 자바 GUI 프로그래밍 II 제8장 MVC Model 8.1 MVC 모델 (1/7) MVC (Model, View, Controller) 모델 스윙은 MVC 모델에기초를두고있다. MVC란 Xerox의연구소에서 Smalltalk 언어를바탕으로사용자인터페이스를개발하기위한방법 MVC는 3개의구성요소로구성 Model : 응용프로그램의자료를표현하기위한모델 View : 자료를시각적으로 (GUI 방식으로