[디자인 패턴] MVC, MVP, MVVM

참고

https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교

0. 배경 및 목표

역할을 나눠서 유지보수와 개발을 하자!

캡슐화, 가상화, 응집도는 높이고 결합도는 낮춤

 

개발할 때, input/output이 명확하고 모듈 간 역할이 정해져 있기 때문에 개발하기 편하고 다른 사람이 알아보기도 쉽다

역할이 구분되어 있기 때문에, 어디서 문제가 발생했는지 비교적 쉽게 찾을 수 있다.

 

1. MVC

역할

• Model : 데이터, 데이터 처리
• View : 사용자에게 보여지는 화면
• Controller : Action을 받아서 Model을 업데이트하고, 보여줄 V를 선택함

흐름

1. Controller )  Action을 받음
2. Controller )  받은 Action으로 Model 업데이트
3. Controller )  나타낼 V 선택
4. View )  Model으로 화면에 정보 나타냄

단점

View에서 Model로 데이터를 바로 갖고 오다보니 V - M 간 의존성이 높아짐

 

여기서 의존성이란 ... 나는 이렇게 이해했는데 아닐 수도 있음

View에서 Model로 직접 데이터를 전달하기 때문에, View에서는 받은 데이터를 쓰려면 지역변수처럼 저장해놓는 변수, 공간이 따로 필요 (매개변수도 마찬가지, Model에 존재하는 데이터가 아니라 Model에서 복사된 데이터)

여기서 View에서 따로 저장한 데이터 - Model에 저장된 데이터(정확히 말하자면 DB)가 항상 같아야 하므로 여기서 의존성이 발생

만약 Model에 저장된 데이터가 바뀌었다면 View에 따로 저장된 데이터는 반드시 업데이트 되어야 한다

2. MVP

역할

• Model : 데이터, 데이터 처리
• View : 사용자에게 보여지는 화면, Action을 받아서 Presenter에 필요한 데이터 요청
• Presenter : View에서 요청받은 데이터를 Model에서 갖고 와서, 가공 후 다시 View에 전달

흐름

1. View ) Action을 받음
2. Presenter ) 받은 Action으로 Model에서 필요한 정보 가져옴
3. Presenter ) 필요한 data format으로 가공
4. Presenter ) 가공한 데이터를 View에 전달
5. View ) 받은 데이터로 화면에 나타냄

단점

V에서 M으로 직접 데이터를 주고받지는 않기 때문에 MVC에서 문제됐던 V - M 의존성은 해결

그러나 V - P 간 데이터를 주고받기 때문에 또 V - P 간 의존성 발생

 

3. MVVM

역할

• Model : 데이터, 데이터 처리
• View : 사용자에게 보여지는 화면, Action을 받아서 VM에 요청 전달 <command>
• View Model : View를 위한 sub model 느낌 .. V에서 받은 요청대로 데이터를 가공해서 저장해놓음
  • 이때 V - VM은 data binding으로 연결

흐름

1. View )  Action을 받음, command로 View Model에 보냄
2. View Model ) 받은 Action으로 Model에서 필요한 정보 가져옴
3. View Model ) 필요한 data format으로 가공
4. View Model ) 가공한 데이터를 View Model에 저장
5. View) data binding으로 View Model의 데이터를 화면에 나타냄

이전의 단점 해결

V - P 간 데이터틀 직접 주고받는 게 아닌 data binding 이므로, V - P 간 의존성 해결

 

Command

'요청'을 객체의 형태로 캡슐화해서 전달

ex. add (1) , undo () , 이런 함수들

보통 class 안에 있는 함수들 생각하면 될 듯

참고) https://ko.wikipedia.org/wiki/%EC%BB%A4%EB%A7%A8%EB%93%9C_%ED%8C%A8%ED%84%B4

Data Binding

제공 받은 데이터를 묶고(bind), 동기화 시키는 것

MVVM에서는 V - VM - M 간 데이터를 동기화 시킨다.

React로 예를 들자면 Recoil Redux 같은 상태관리 툴 ? ... 

 

정리

	MVC	MVP	MVVM
Model	데이터, 데이터 처리	데이터, 데이터 처리	데이터, 데이터 처리
View	UI Model로 화면을 나타냄	UI 사용자 Action 받음 P에 데이터 요청 받아서 V 업데이트	UI 사용자 Action 받음 VM에 데이터 요청(command) data binding으로 화면 나타냄
Controller / Presenter / ViewModel	사용자 Action 받음 받은 Action으로 M 업데이트 나타낼 V 선택 (1:N)	M에 데이터 요청 정보 가공 후 V에 전달 (1:1)	M에 데이터 요청 정보 가공 후 VM에 저장 (1:N)
단점	M - V 의존성	P - V 의존성	구현하기 어려움