[JavaScript] MVC / MVP / MVVM 패턴

MVC 패턴

MVC 패턴은 Model View Controller의 약어이며, 세 가지가 합해진 것이라고 봐도 무방하다.

출처: https://beomy.tistory.com/43

• 구조
  • Model: 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분
  • View: 사용자에게 보여지는 UI 부분
  • Controller: 사용자의 입력을 받고 처리하는 행동을 하는 부분
• 동작
  1. 사용자의 Action들이 Controller로 들어옴
  2. Controller가 사용자의 Action을 확인
  3. Model 업데이트
  4. Controller가 Model을 나타내 줄 View 선택
  5. View가 Model을 이용해 화면에 나타냄
• 특징
  • MVC의 Controller는 여러 개의 View를 선택할 수 있는 1:N 구조
  • Controller가 View를 선택할 뿐, 직접 업데이트하지 않음
  • View는 Controller의 존재에 대해 알 수 없음
• 장점
  • 가장 널리 사용되고 있는 만큼 가장 단순하고 보편적인 패턴
• 단점
  • View와 Model에 대한 의존성이 높음
    • 어플리케이션이 커질 수록 복잡해지고 유지 보수가 어려워짐

---

MVP 패턴

MVP 패턴은 Model View Presenter의 약자이다. MVC 패턴과 동일하지만, Controller가 아닌 Presenter가 존재한다.

 

출처: https://beomy.tistory.com/43

• 구조
  • Model과 View는 MVC 패턴과 동일
  • Presenter: View에서 요청한 정보로 Model을 가공하여 View에 전달하는 부분 (View와 Model을 붙여 주는 역할)
• 동작
  1. 사용자의 Action들이 View를 통해 들어옴
  2. View는 데이터를 Presenter에게 요청
  3. Presenter는 Model에게 데이터 요청
  4. Model은 Presenter에게 요청받은 데이터에 대해 응답
  5. Presenter은 View에게 데이터 응답
  6. View는 Presenter가 응답한 데이터를 이용해 화면을 나타냄
• 특징
  • Present는 View와 Model의 인스턴스를 가지고 있어 둘을 연결하는 접착제 역할을 하며, Presenter와 View는 1:1 관계이다.
• 장점
  • View와 Model에 대한 의존성이 없음
    • Presenter를 통해서만 데이터를 전달받기 때문
• 단점
  • View와 Presenter 사이의 의존성이 높아짐
    • 어플리케이션이 복잡해질 수록 이 의존성이 높아짐

---

MVVM 패턴

MVVM 패턴은 Model View View Model의 약자이다. Model과 View는 다른 패턴들과 동일하다.

출처: https://beomy.tistory.com/43

• 구조
  • Model, View는 다른 패턴들과 동일
  • View Model: View를 표현하기 위해 만든 View를 위한 Model이며, View를 나타내기 위한 데이터를 처리하는 부분
• 동작
  1. 사용자의 Action들이 View를 통해 들어옴
  2. View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달
     • Command 패턴: 실행될 기능을 캡슐화함으로 주어진 여러 기능을 실행할 수 있는 재사용성 높은 클래스로 설계하는 패턴으로, 실행될 기능의 변경에도 호출자 클래스를 수정 없이 그대로 사용 가능
  3. View Model은 Model에게 데이터 요청
  4. Model은 View Model에게 요청받은 데이터에 대해 응답
  5. View Model은 응답 받은 데이터를 가공하여 저장
  6. View는 View Model과 Data Binding하여 화면을 나타냄
• 특징
  • Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현됨
    • 이 두 가지 패턴을 이용하여 View와 View Model 사이의 의존성을 제거
  • View Model과 View는 1:N 관계
• 장점
  • View와 View Model 사이의 의존성 없음
  • 각각의 부분이 독립적이므로 모듈화하여 개발 가능
• 단점
  • View Model 설계가 어려움

---

참고

- https://beomy.tistory.com/43