MVVM 패턴

Vue.js를 공부하다가 MVVM 패턴에 대해 들어보신 적이 있으실 텐데요.

MVVM 패턴이 무엇인지 알아봅시다!

 

1. MVVM 패턴

MVVM 패턴은 Model-View-ViewModel 패턴이라고도 불립니다.

이는 소프트웨어 아키텍처 디자인 패턴 중 하나로, 주로 GUI 애플리케이션 개발에서 사용됩니다.

이 패턴은 코드의 유지보수성과 재사용성을 높이고, 테스트를 용이하게 하며, UI와 비즈니스 로직을 분리하는 데 도움을 줍니다.

 

2. 구성요소

각 구성요소와 어떤 역할을 하는지에 대해 알아봅시다!

출처: 제로코딩님의 (디자인 패턴) MVVM 패턴이란

1) Model(모델)

Model은 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.

DB, 웹 서비스와의 상호작용 등을 처리합니다.

ViewModel에 의해 데이터가 변경되거나, 저장소로부터 데이터를 불러옵니다.

 

2) View(뷰)

View는 사용자 인터페이스(UI) 요소를 나타냅니다.

즉, 사용자에게 보여지는 화면입니다.

데이터를 표시하고 사용자 입력을 처리합니다.

보통 XAML, HTML 등의 마크업 언어로 정의됩니다.

 

3) ViewModel(뷰모델)

View와 Model 사이의 중개자 역할을 합니다.

Model로부터 데이터를 가져와서 View에 제공하고, View의 사용자 입력을 처리합니다.

데이터 바인딩을 통해 View와 상호작용합니다.

View에 종속적이지 않으며, 테스트가 용이합니다.

데이터 바인딩(Data Binding) : UI 요소와 데이터 소스 간의 동기화를 자동으로 처리해주는 매커니즘

 

3. 동작 방식

그럼 이제 MVVM 패턴이 어떻게 동작하는지 알아봅시다!

1) View와 ViewModel의 바인딩(Binding)

View는 ViewModel의 속성과 명령(Command)에 바인딩됩니다.

이를 통해 ViewModel의 데이터 변경이 자동으로 View에 반영되고, View의 사용자 입력이 ViewModel로 전달됩니다.

 

2) ViewModel과 Model의 상호작용

ViewModel은 Model로부터 데이터를 요청하고, 필요한 경우 데이터를 변경합니다.

Model은 이 변경 사항을 ViewModel에 알리며, ViewModel은 다시 이를 View에 반영합니다.

 

4. 정리하며

지금까지 MVVM 패턴에 대해 알아보았습니다.

이를 활용하면, 복잡한 애플리케이션도 구조적으로 설계할 수 있어 유지보수와 확장이 용이해집니다.

 

참고

제로코딩님의 (디자인 패턴) MVVM 패턴이란

James님의 [디자인 패턴] MVVM 패턴이란?

박준형님의 MVVM 디자인 패턴이란