MVC, MVP, MVVM 비교

배경

옛날 웹은 서버에서 렌더링까지 담당했었기때문에 어떻게 하면 효율적으로 코드를 짤 수 있을지가 중요했습니다.
수많은 프로그램이 생기면서 코드들이 복잡해지고, 새로운 기능을 추가할때마다 코드를 갈아엎어야했습니다.
이에 따라 코드의 유지보수를 어떻게 하면 잘할 수 있을까? 에 대해 많은 방법을 찾기 시작했습니다.

어떻게 하면 코드구성을 하면 유지가 쉽다더라. 저렇게하면 코드 유지가 쉽다더라. 하며 많은 방법들이 쏟아져나왔고,
그 방법들 사이에서는 공통점이 패턴들이 있었습니다. 그 패턴들을 하나의 공식처럼 만들어서 논문으로 발표하게 되었고,
그래서 개발자들 사이에서 유명해진 것이 MVC패턴입니다.

요약하자면 MVC는 코드에 대한 유지보수를 어떻게 편하게 할 수 있을지 고민하다가 탄생하게 된 패턴 중 하나입니다.

먼저 MVC 패턴에 대해 설명하고, MVC 패턴 기반으로 탄생하게된 MVP, MVVM 개념에 대해 차례대로 포스팅하겠습니다.

MVC 패턴

MVC 패턴은 역할 구분을 정확히하고, 그에 대한 작업만하자는 취지의 개념입니다.

• 역할
  • Model: 애플리케이션에서 사용되는 데이터를 저장하고, 그 데이터 처리를 하는 부분입니다.
  • View: 사용자에게 보여지는 UI 부분입니다.
  • Controller: 사용자의 입력을 받고 처리하는 부분입니다.

MVC 패턴은 백엔드에서 주로 많이 사용되는 개념이고 (물론 프론트에서도 쓰일 수 있습니다.)
옛 웹의 시절에는 서버가 렌더링까지 하는 경우가 많았기 때문에, View 의 부분과 함께 역할이 나뉘어있습니다.

MVC 패턴을 실제 예시를 든다면 아래와 같습니다.

1. 유저가 구글에 '코딩'이라고 입력한다.
2. Controller는 Model에게 '코딩'관련 검색결과 데이터를 요청한다.
3. Controller는 업데이트 결과에 따라 View를 선택합니다.
4. Model은 선택된 View에게 Notify 하여 업데이트 합니다.

MVC패턴은 각각 맡은 부분의 역할만 담당해야합니다.
예를 들어, Model에 Controller관련 코드가 있어선 안되고, View에 Model관련 코드가 있거나 해선 안됩니다.
Controller는 사진이나 글에서 보여지는 것 그대로 중개자 역할을 하고 있습니다.
Controller는 업데이트 결과에 따라 View를 선택합니다.
하나의 Controller는 View를 선택할 수 있기 때문에 여러 개의 View를 관리할 수 있습니다.

MVC 패턴 장단점

• 장점
  • 보편적으로 많이 사용되고 있어 단순합니다.
• 단점
  • MVC 패턴의 단점은 View와 Model 사이의 의존성이 높습니다. (모델이 view가 업데이트된건지 알고있는 등)
  • Controller의 역할이 비대해진다.

MVP 패턴

MVP 패턴은 Model + View + Presenter를 합친 용어입니다. Model과 View는 MVC 패턴과 동일하고, Controller 대신 Presenter가 존재합니다. MVP 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다.

• 역할
  • Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
  • View : 사용자에서 보여지는 UI 부분입니다.
  • Presenter : View에서 요청한 정보로 Model을 가공하여 View에 전달해 주는 부분입니다.

MVP패턴은 Model과 View는 서로 연결되지 않고 Presenter를 통해서 변화를 알 수 있게 됩니다.
이렇게 화면과 비즈니스로직이 완전히 분리되면서 테스트가 용이해집니다.

MVP 패턴 장단점

• 장점
  • View와 Model을 분리시켜 MVC에서 하기 힘들었던 테스트가 용이해집니다.
  • View와 Model의 의존성이 없어집니다.
• 단점
  • View와 Presenter의 의존관계가 강해지고 Controller 대신 Presenter가 복잡해집니다.
  • View와 Presenter가 1:1 관계이기 때문에 View마다 Presenter가 있어야합니다.

MVVM 패턴

MVP패턴 같은 경우 비슷한 로직의 View가 있더라도 매번 다른 Presenter를 가져야 했기 때문에
이에 대한 방안으로 나온 것이 MVVM 입니다.
MVVM 패턴은 Model + View + View Model를 합친 용어입니다. Model과 View은 다른 패턴과 동일합니다.

• 역할
  • Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
  • View : 사용자에서 보여지는 UI 부분입니다.
  • View Model : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.

1. 사용자의 Action들은 View를 통해 들어오게 됩니다.
2. View에 Action이 들어오면, View Model에 Action을 전달합니다.
3. View Model은 Model에게 데이터를 요청합니다.
4. Model은 View Model에게 요청받은 데이터를 응답합니다.
5. View Model은 응답 받은 데이터를 가공하여 저장합니다.
6. View는 View Model과 Data Binding하여 화면을 나타냅니다.

쉽게 말해, View는 View Model을 구독 or Watch하고 있습니다. View Model은 더이상 이전과 같이 View에게
화면을 그려야한다고 알려주거나 하지 않습니다. 그저 데이터를 가공하고 저장하는 역할만 하게 됩니다.
이렇게 된다면 여러 화면이 있더라도 비슷한 데이터를 가지고 있는 것이라면 똑같은 View Model을 공유할 수 있습니다.
그래서 1(View Model):n의 관계를 가질 수 있습니다.

이렇게 되면 View같은 경우도, View관련 데이터가 어떤게 바뀌어야하는지 신경쓰지 않아도 되고 View Model이 데이터를 가공해 저장한 것만 가져와 화면을 나타내기만 하면됩니다.

MVVM 패턴 장단점

• 장점
  • MVVM 패턴은 View와 Model 사이의 의존성이 없습니다.
  • 또한 Command 패턴과 Data Binding을 사용하여 View와 ViewModel사이의 의존성 또한 없앤 패턴입니다.
  • 그리고 중복되는 코드를 모듈화 하여 개발할 수 있습니다.
• 단점
  • MVVM 패턴의 단점은 ViewModel의 설계가 쉽지 않다는 점입니다.

Reference Doc

[10분 테코톡] 🧀 제리의 MVC 패턴
MVC, MVP, MVVM 차이점 알아보기
MVC, MVP, MVVM 비교
Design Pattern MVC, MVP, MVVM 비교