ComputerScience/디자인 패턴

MVC, MVP, MVVM 패턴

dev_swan 2023. 11. 13. 21:00

✏️ MVC 패턴

MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴입니다.

 

애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있습니다. 재사용성과 확장성이 용이하다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있습니다.

MVC 패턴 - https://developer.apple.com/

 

📊 모델

모델(Model)은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미합니다.

 

예를 들어 사각형 모양의 박스 안에 글자가 들어 있다면 그 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷에 관한 정보를 모두 가지고 있어야 합니다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신합니다.

🖥️ 뷰

뷰(View)는 inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타냅니다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 의미합니다.

 

모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 합니다. 또한, 변경이 일어나면 컨트롤러에 이를 전달해야 합니다.

⚙️ 컨트롤러

컨트롤러(Controller)는 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당합니다. 또한 모델과 뷰의 생명주기도 관리하며, 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려줍니다.

더보기

💡 생명주기

생명주기는 객체, 컴포넌트, 프로세스, 프로젝트 등의 전체 수명동안 거치는 다양한 단계나 상태를 의미합니다.

 

특정 요소의 생성부터 종료까지의 모든 과정을 포함하며, 각 단계는 특정한 목적과 관련된 작업들을 포함하고 있습니다. 예를 들어 객체 지향 프로그래밍에서 객체의 생명주기는 아래와 같습니다.

 

  1. 생성 (Initialization) : 객체가 메모리에 할당되고 생성자가 호출됩니다.
  2. 사용 (Usage) : 객체의 메서드가 호출되거나 속성에 접근하는 등의 활동이 이루어집니다.
  3. 소멸 (Destruction) : 객체가 더 이상 필요하지 않게 되면, 메모리에서 해제됩니다. 소멸자가 호출될 수도 있습니다.

💡 소멸자 (Destructor)

소멸자는 객체 지향 프로그래밍에서 객체의 수명이 끝날 때 자동으로 호출되는 특별한 메서드를 의미합니다. 소멸자의 주요 목적은 객체가 사용하던 리소스를 해제하고, 객체의 종료 작업을 처리하는 것입니다.

❗️ MVC를 지키면서 코딩하는 방법

1️⃣ Model은 Controller와 View에 의존하지 않아야 합니다. 이는 Model 내부에 Controller와 View에 관련된 코드가 있으면 안됨을 의미합니다.

2️⃣ View는 Model에만 의존해야 하고, Controller에는 의존하면 안됩니다. 이는 View내부에 Model의 코드만 있을 수 있고, Controller의 코드가 있으면 안 됨을 의미합니다.

3️⃣ View가 Model로부터 데이터를 받을 때는, 사용자마다 다르게 보어주어야 하는 데이터에 대해서만 받아야 합니다.

4️⃣ Controller내부에는 Model과 View에 의존해도 됩니다. / 이는 Controller 내부에는 Model과 View의 코드가 있을 수 있음을 의미합니다.

5️⃣ View가 모델로부터 데이터를 받을 때, 반드시 Controller에서 받아야 합니다.

✏️ MVP 패턴

MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러(Contoller)가 프레젠터(Presenter)로 교체된 패턴입니다. 뷰와 프레젠터는 1:1 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴입니다.

 

MVP 패턴 - https://medium.com/etermax-technology/how-to-tdd-in-unity-using-the-mvp-pattern-a646ffbe996f

⚙️ 프레젠터 (Presenter)

프레젠터(Presenter)는 View와 Model 사이의 인터페이스 역할을 합니다.

 

View에서 받은 사용자의 입력을 Model에 전달하여 처리하도록 지시하고, Model로부터 데이터를 가져와 View에 표시하도록 지시합니다. 중요한 점은, Presenter는 View에 직접적인 참조를 가지지 않습니다. 대신, View는 일반적으로 인터페이스를 통해 Presenter에 연결되며, 이를 통해 역방향 참조가 이루어집니다.

✏️ MVVM 패턴

MVVM 패턴은 Model, View, ViewModel로 이루어진 디자인 패턴으로, 여기서 ViewModel은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다.

 

View와 ViewModel 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.

MVVM 패턴 - https://medium.com/@ybeyza.ankara/mvvm-model-view-viewmodel-the-love-triangle-of-modern-software-development-4ca81cc51f49

⚙️ 뷰 모델 (ViewModel)

ViewModel은 Model과 View의 사이의 다리 역할을 하는 중간 요소로, 주로 UI 로직을 담당합니다.

 

이는 Model의 데이터를 View에 표시하기 적합한 형태로 변환하고, 명령 패턴과 데이터 바인딩을 통해 View와의 통신이 이루어집니다. 또한 사용자의 액션을 직접 받지 않으며, 데이터 바인딩을 통해 자동으로 Model과 View의 동기화를 유지합니다.

🔍 Controller, Presenter, ViewModel 차이점 비교

 

1️⃣ Controller (MVC)

  • 역할 : 사용자의 입력을 받아 처리하고, 해당 입력을 기반으로 Model과 View사이의 상호작용을 조정합니다.
  • 특징 :
    • View와 직접적인 상호작용을 하면서 사용자의 요청에 따른 데이터 처리나 View의 업데이트를 지시합니다.
    • Controller는 사용자의 입력과 애플리케이션의 출력을 모두 관리하므로, View와 Model사이의 중간자 역할을 합니다.

 

2️⃣ Presenter (MVP)

  • 역할 : View에서 받은 사용자 입력을 처리하며, Model과의 상호작용 결과를 다시 View에 표현하도록 지시합니다.
  • 특징 :
    • View와 직접적으로 연결되지 않지만, View는 Presenter에 대한 인터페이스를 통해 상호작용하며, 이로써 View와 비즈니스 로직 사이의 종속성이 줄어듭니다.
    • View와 Model 간의 독립성이 증대되므로, 유닛 테스트하기 더 쉬워집니다.

 

3️⃣ ViewModel (MVVM)

  • 역할 : Model 데이터를 View에 바인딩할 수 있는 형태로 변환하며, 명령 패턴을 통해 View와 상호작용합니다.
  • 특징 :
    • ViewModel은 데이터 변환 및 표현에 관련된 UI 로직만을 관리합니다.
    • 데이터 바인딩을 활용하여, View와 Model 사이의 동기화를 자동화합니다. 이로 인해 개발자는 상호작용의 세부 사항에 대해서는 크게 신경 쓰지 않아도 됩니다.
    • View나 View의 상태에 대한 지식을 갖지 않아, View와의 결합도가 낮습니다.

결론적으로, 이 세 패턴 모두 사용자 인터페이스와 비즈니스 로직을 분리하려는 공통 목표를 갖고 있지만, 이들 사이의 상호작용을 어떻게 관리하고 조정하는지에 따라 차이가 있습니다.