디자인 패턴(MVC, MVVM, MVP)

1. MVC(Model-View-Controller)

Model: 사용되는 데이터를 정의하고 처리하는 역할

View: 사용자에게 보이는 것

Controller: 사용자로부터 응답을 받아 Model 또는 View를 업데이트 하거나, 데이터를 전달해주는 역할

MVC

[동작 순서]

1. action(사용자가 제출한 form데이터)이 Controller에게 전달된다.

2. Controller는 Model에게 전달하고 새로운 데이터를 요청하거나 Controller가 View의 데이터를 직접처리해서 View에게 알림

3. Model은 로직을 처리하여 새로운 데이터를 연관된 VIew에게 알림

4. View는 받은 데이터를 통해 화면을 업데이트

 

[장점]

다른 패턴들에 비해 직관적인 구조로 상대적으로 이해하기 쉬움

[단점]

View와 Model사이의 업데이트 관계가 존재하여 의존성이 높아서 프로젝트 규모가 커지면 복잡해짐

---

2. MVVM(Model-View-View Model)

: SPA(Single Page Application)의 클라이언트 측 기능이 중요해지면서 자주 쓰이는 패턴

Model: 데이터를 정의하고 처리하는 기능

View: 사용자에게 보이는 것

View Model: View로부터 요청을 받은 데이터를 처리하여 Model을 갱신하고, 갱신된 모델에 따라 자신이 소유한 데이터도 업데이트

MVVM

[동작 순서]

1. action이 View에게 전달됨

2. View는 ViewModel에게 해당 데이터를 특정 요청과 전달

3. ViewModel은 받은 데이터를 로직에 따라 처리하여 Model을 업데이트

4. 갱신된 데이터를 구독하고 있는 ViewModel이 업데이트되고 해당 ViewModel의 데이터를 구독하는 View가 업데이트됨

 

[장점]

ViewModel이 따로 저장하는 데이터를 구독하여 자동 업데이트하는 구조로 View가 독립적으로 변함으로써, Model과  ViewModel의 의존성 문제 해결

[단점]

다른 패턴에 비해 상대적으로 이해하기 어렵고 처음 설계가 복잡

---

3. MVP(Model-View-Presenter)

Model: 데이터를 정의하고 처리하는 역할

View: 사용자에게 보이는 것

Presenter: Model과 View의 중계자 역할로, 서로의 요청과 응답을 전달해줌

MVP

[동작 순서]

1. action이 View에게 전달됨

2. View가 Presenter에게 데이터를 전달하며 새로운 데이터를 요청

3. Presenter는 Model에게 데이터를 전달하며 새로운 데이터를 요청

4. Model은 Presenter의 요청을 토대로 데이터를 처리하여 새 데이터를 Presenter에게 전달

5. Presenter는 받은 데이터로 View에게 알림

6. View는 받은 데이터를 통해 화면을 업데이트

 

[장점]

View와 Model사이의 연결점이 없어 의존성 문제가 사라짐

[단점]

Presenter역할이 중요해지면서 View와 Presenter사이의 의존성 문제 발생

---

[참고 사이트]

https://gusrb3164.github.io/web/2021/03/09/mvc-mvp-mvvm-structure/

MVC, MVP, MVVM 패턴 개념과 특징 이해하기