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

Chloe K·2023년 1월 13일
post-thumbnail

MVC

Model + View + Controller

Model: 데이터와 관련된 일을 처리
Controller: View와 Model의 중개자 역할
View: 사용자한테 보여지는 부분

  • Model은 Controller와 View에 의존하지 않아야 한다. (Model 내부에 Controller와 View에 관련된 코드가 있으면 안된다.)
  • View는 Model에만 의존해야하고, Controller에는 의존하면 안된다. (View 내부에 Model의 코드만 있을 수 있고, Controller의 코드가 있으면 안된다.)
  • View가 Model로부터 데이터를 받을 때는, 사용자마다 다르게 보여주어야하는 데이터에 대해서만 받아야한다.
  • Controller는 Model과 View에 의존해도 된다. (Controller 내부에는 Model과 View의 코드가 있을 수 있다.
  • View가 Model로부터 데이터를 받을 때, 반드시 Controller에서 받아야한다.

(예시)
1. 구글에 "코딩"이라고 검색
2. 컨트롤러는 "코딩"에 대한 검색결과 데이터를 달라고 모델에게 요청
3. 컨트롤러는 다시 받은 검색 결과 데이터를 View로 전달
4. View는 사용자가 보는 UI에 검색결과를 데이터를 넣어서 웹페이지에 보여줌


MVP

Model + View + Presenter

Presenter: View에서 요청한 정보로 Model을 가공하여 View에 전달해주는 부분이다. VieW와 Model의 매개체

  • View와 Model의 의존성이 없다 (MVC패턴에서는 View는 Model에 의존한다. 이러한 단점을 해결한 패턴이 MVP - Presenter를 통해서만 데이터를 전달받기 때문에)
  • 하지만, View와 Presenter 사이의 의존성이 높다는 단점이 있다.
  1. 사용자의 action은 View를 통해서 들어온다.
  2. View는 data를 Presenter에 요청한다.
  3. Presenter는 Model에게 데이터를 요청한다.
  4. Model은 Presenter에서 요청받은 데이터를 응답한다.
  5. Presenter는 View에게 데이터를 응답한다.
  6. View는 Presenter가 응답한 데이터를 이용하여 화면을 나타낸다.

MVVM

Model + View + View Model

View Model: View를 표현하기 위해 만든 View를 위한 Model이다. 즉, View를 나타내기 위한 데이터를 처리하는 부분이다.

  • Command 패턴과 Data binding을 이용하여 View와 View Model 사이의 의존성을 없앴다.
  • 각각의 부분은 독립적이기 때문에 모듈화하여 개발할 수 있다.
  1. 사용자의 action들은 View를 통해 들어오게 된다.
  2. View에 action이 들어오면, Command 패턴으로 View Model에 Action을 전달한다.
  3. View Model은 Model에게 데이터를 요청합니다.
  4. Model은 View Model에게 요청받은 데이터를 응답합니다.
  5. View Model은 응답받은 데이터를 가공하여 저장합니다.
  6. View는 View Model과 Data Binding하여 화면을 나타냅니다.

profile
Frontend Developer

0개의 댓글