MVC, MVP, MVVM 디자인 패턴이란

소프트웨어 공학에서 어플리케이션을 구성하는 여러 디자인 패턴들이 있습니다.

1. MVC(Model-View-Controller) 2. MVP(Model-View-Presenter) 3.MVVM(Mdoel-View-ViewModel)

모두 모델과 뷰 사이의 관계를 어떻게 처리할지를 고민한 결과로 나온 해결책입니다.

무엇인가 개발한다 함은 간단하게 이야기 하자면 데이터를 UI에 연결하는 일을 하는 것입니다.

대충 연결해 놓으면 원본 데이터의 구조 일부나 화면 일부가 변경된다거나 할때 데이터와 UI 상호 연관된 부분 때문에

수정이 어려워집니다. 데이터 일부만 다르고 같은 유사한 UI를 쓰는 화면이나, 원본 데이터는 같은데 UI만 다른식으로

표현해야 하는 경우에도 전부 다시 개발하거나 수정해야 할 가능성이 높아집니다.

그래서 UI(View)와 데이터(Model)를 어떻게든 분리하려고 합니다. 상호연계해야하기 때문에 일단 분리 후 어떤식으로든 연계할 것입니다.

이 연계방식이 어떠냐에 따라 MVC, MVP, MVVM으로 나뉘게됩니다.

각 디자인 패턴들에 대해 설명하기 전에 각각의 용어들에 대한 설명을 하겠습니다.

-Model-

- 데이터를 가지고 있는 객체입니다.

만약 View에서 어떤 데이터를 요청하면, 그에 해당하는 데이터를 컨트롤러를 통해 전달하며, 

데이터의 변동이 일어나면, 변동된 데이터로 갱신을 당하는 역할을 합니다.

-View-

- 사용자가 볼 화면 즉 프론트엔드 단으로 보면 될것입니다.

DB에서 추출한 데이터를 가지고 출력해주거나, 사용자의 입력을 받는 부분입니다.

-Controller-

- View와 Model을 조율하는 조율자 같은 역할이라고 보면됩니다.

Model의 데이터를 추가 및 삭제가 가능하며, 모델에 존재하는 데이터를 View 보내는 등 중간 매게체 역할을 합니다.

1. MVC(Model-View-Controller)

- 프론트엔드 부분과 백엔드 부분을 구분하여 개발하는 방식을 말합니다.

따라서 서로의 영향을 받지 않고 수정이 가능하며, 그 외에도 유지보수에 탁월하게 작용합니다. 

2. MVP(Model-View-Presenter)

- 이 디자인패턴의 핵심은 사용자인터페이스(View)와 비지니스 로직(Model)을 분리하고, 서로간의 상호작용을 다른 객체(Presenter)에 위임해 서로의 영향을 최소화 하는것에 있습니다. 이 패턴을 이용해서 Model과 View간의 결합도를 낮추면, 새로운 기능을 추가하거나 변경할 필요가 있을때 관련된 부분만 수정하면 되기 때문에 확장성이 좋아지며, 테스트코드를 작성하기 편리해지기 때문에 더 안전한 코드 작업이 가능해집니다. 

3. MVVM(Model-View-ViewModel)

- 화면(View)은 자기가 표현하고자 하는 속성값을 가지고 있는 ViewModel을 불러들여 UI에 출력합니다. ViewModel은 특정한 Data조회 모듈을 이용해 필요로 하는 자신의 속성값을 채웁니다. Model은 Data를 조회하는 부분을 담당하거나, Data를 조회해서 특정Model 또는 ViewModel를 만듭니다. 

예를 들어보겠습니다.

주소를 서울에서 인천으로 수정해봅시다.

텍스트박스에서 수정하고 저장을 누르면 인천으로 저장되어야 합니다. UI에서 저장을 누르면 UI는 변경된 텍스트값을 알고 있습니다. 

하지만 현재까지 vm이나 m(data처리객체)은 변경된 값을 모릅니다. 이런경우 MVC에서는 컨트롤러가 이미 뷰와 모델을 모두 참조로 가지고 있기 때문에 컨트롤러에서 텍스트받스의 값을 직접 m으로 넘겨줘서 저장하도록 합니다. 

컨트롤러에는 string addr = v.text주소; m.save(addr); 이런식의 코드가 존재하게 됩니다. 

만약 view가 변경되어서 텍스트박스의 이름이 바뀌거나 없어지면 어떻게 될까요?

컨트롤러 내부 코드중 v.text주소 라는 부분이 명시적으로 view에 의존하기 때문에 문제가 발생합니다.

mvvm패턴에서는 vm이 view에 의존하지 않고, view에서는 어차피 주소 출력하려면 vm을 접근해야한, 주소변경시에도 view가 직접 vm의 속성인 주소값을 변경해 주고 vm은 그저 자신의 속성 "주소"의 값을 m.save(this.주소); 이런식으로 처리하면 됩니다.

wpf로 개발할 경우 vm이 view에 의존하지 않고 서로 정보를 교환할 수 있도록 Data Binding 이나 Command Binding등의 기능을 기본적으로 제공합니다. wpf에서는 view와 viewmodel의 관계 설정을 위해 다른 코드를 할 필요없이 아래와 같이 데이터바인딩을 이용합니다

<TextBox Text = "{Binding 주소}"> 이 코드면 view에서 데이터를 출력하거나 수정하기 위한 모든 처리가 끝입니다.