MVC, MVP, MVVM 패턴

yesjm·2024년 1월 23일
0

MVC (Model-View-Controller)

MVC 디자인 패턴은 하나의 애플리케이션을 Model, View, Controller로 이루어진 3개의 측면으로 분리하여 개발하는 디자인 패턴이다.

mvc
MVC(Model-View-Controller) 패턴 정리

MVP (Model-View-Presenter)

MVP패턴은 MVC패턴에서 파생된 디자인 패턴으로 Model과 View는 MVC패턴의 구조와 역할이 동일하다. 차이점이라고 하면 Controller를 Presenter로 대체한다는 것이다.

지나치게 의존적인 Model과 View의 한계점을 해결해주기 위해 Controller를 Presenter로 대체하였으며 View와 Model의 각 요소를 보다 명확하게 분리하여 그 의존성을 해결했다.

mvp

Model & View

Model은 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분이다. View는 유저에게 보여지는 User Interface부분으로 Model, View 모두 MVC패턴과 동일하다.

Presenter

Presenter는 View에서 요청한 정보로 Model에서 받은 데이터를 가공하여 View에게 전달해주는 역할을 한다. 즉, Presenter는 Model과 View의 다리역할을 한다.

동작 방식

  1. 사용자의 Action은 View를 통해 들어온다.
  2. View는 데이터를 Presenter에 요청
  3. Presenter는 Model에게 데이터를 요청
  4. Model은 Presenter에게 요청받은 데이터를 응답
  5. Presenter가 데이터를 가공하고 다시 View에게 응답
  6. View는 Presenter로 부터 데이터를 응답받고 UI 데이터를 갱신

장점

  • Controller를 Presenter로 대체함으로써 Model과 View 사이의 의존성을 해결함

한계점

  • Presenter와 View 사이의 의존성 증가
  • 어플리케이션이 복잡해질수록 View와 Presenter 사이의 의존성이 강해짐
  • View : Presenter = 1 : 1 관계 형성 (각 View마다 Presenter 필요)
  • 프로젝트가 확장되면 코드가 기하급수적으로 증가함

MVVM (Model-View-Model)

MVVM 패턴에서는 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 발견할 수 있다. 뷰 모델 안에서 그리고 뷰에게 수정사항들을 자동적으로 이동시킨다. 뷰모델에서 변화를 주기 위해서, 뷰모델은 옵저버 패턴을 사용한다.

Model

MVC, MVP와 비슷하게 모델은 비즈니스 로직을 나타내고 클래스의 집합으로 특징된다. 이 부분은 데이터가 바뀌고 조작되는지에 대한 비즈니스 규칙을 디자인하는데 동작한다.

View

마찬가지로 MVC, MVP와 비슷하게 뷰는 UI 컴포넌트를 나타낸다. 뷰는 컨트롤러가 폼 형태로 되돌려준 결과를 보여준다. 모델은 또한 UI에 뷰로 변환될 수 있다.

View Model

뷰모델의 책임 중 하나는 메서드와 함수들을 나타내는 것이다. 모델을 작동하기 위한 명령을 나타내고, 뷰의 상태를 유지시키고 뷰의 이벤트를 활성화 시킨다.

mvvm

동작 방식

  1. 사용자의 Action들은 View를 통해 들어온다.
  2. View에 Action이 들어오면 ViewModel에 Action을 전달
  3. ViewModel은 Model에게 데이터를 요청
  4. Model은 ViewModel에게 요청받은 데이터를 응답
  5. ViewModel은 응답 받은 데이터를 가공하여 저장
  6. View는 Data Binding을 이용해 UI를 갱신

장점

  • View와 Model의 의존성 문제 해결
  • Command와 Data Binding 으로 View와 View Model의 의존성 문제 해결
  • GUI Business와 Backend Logic의 분리
  • 테스트 및 확장 용이성 증가
  • MVC, MVP 한계점 해결

한계점

  • View Model의 설계가 어려움

참고
https://devowen.com/457
https://enumclass.tistory.com/230
https://velog.io/@zzangzzong/Design-Pattern-MVC-MVP-MVVM

profile
yesjm's second brain

0개의 댓글