디자인 패턴 3

Yedam Lee·2023년 1월 12일
0

MVVM 패턴

모델-뷰-뷰 모델(model-view-viewmodel, MVVM)은 하나의 소프트웨어 아키텍처 패턴으로 사용자 인터페이스(뷰)의 개발을 비즈니스 로직 또는 백엔드 로직(모델)로부터 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다.

MVVM 패턴의 구조

출처: MVVM - wikipedia

📂 모델 [Model]

모델(model)은 비즈니스 로직과 유효성 검사와 데이터를 포함하는 앱의 도메인 모델로 생각할 수 있습니다. 쉽게 말해서, 모델은 앱에서 사용할 데이터에 관련된 행위와 데이터를 다룹니다.

🖥 뷰 [View]

뷰(View)는 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관에 해당한다.
모델을 보여서 표현하고 사용자와 뷰의 상호 작용(클릭, 키보드, 동작 등)을 수신하여, 이에 대한 처리를 뷰와 뷰 모델의 연결을 정의하고 있는 (속성, 이벤트 콜백 함수 등의) 데이터 바인딩(data binding, 데이터 연결)을 통하여 뷰 모델로 전달한다.

📡 뷰 모델 [View Model]

뷰 모델(View Model)은 공용 속성과 공용 명령을 노출하는 뷰에 대한 추상화(abstraction)이다.
MVC 패턴의 컨트롤러나, MVP 패턴의 프리젠터(presenter, 발표자)를 대신하여, MVVM은 바인더(binder, 연결자)를 가지고 있는데, 이는 뷰 모델에 있는 뷰에 연결된 속성과 뷰 사이의 통신을 자동화 한다. 즉, 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 방식이다.
뷰 모델과 MVP 패턴에 있는 프리젠터 사이의 주요한 차이점은 프리젠터는 뷰에 대한 참조를 가지고 있는 반면, 뷰 모델은 그렇지 않다는 것이다. 그 대신, 뷰는 뷰 모델의 속성에 직접 '연결된(binds)' 채로 업데이트를 주고 받는다.

🏅 장점과 한계

장점
뷰와 모델 사이의 의존성이 없고, 데이터 바인딩을 사용하여 뷰와 뷰 모델 사이의 의존성 또한 없앤 디자인 패턴이다.
각각의 부분은 독립적이기 때문에 모듈화하여 개발할 수 있다.
한계
뷰 모델의 설계가 쉽지 않다는 점이 있다.

profile
프론트엔드 개발자

0개의 댓글