Design Pattern in A..Z - MVVM

MVVM

Model View ViewModel로 이루어진 디자인 패턴이다. MVP 패턴에서 View와 Presenter가 1대1 관계, View가 Presenter에게 의존적인 단점을 보완한 디자인 패턴이다.

 

View에서 사용자의 입력을 받으면 Command Pattern을 통해 ViewModel에 Action을 전달합니다. ViewModel은 해당 Action에 맞게 Model을 업데이트하고 ViewModel은 Model의 업데이트를 수신하여 값을 수정합니다. View도 마찬가지로 ViewModel의 변화를 감지하여 새로운 값을 바인딩합니다.

 

---

View

MVC 패턴에서 View처럼 사용자에게 UI를 제공한다.

View는 ViewModel을 알지만 ViewModel은 View를 모릅니다. 또한 DataBinding과 Command 패턴을 이용하여 View와 ViewModel의 의존도를 없앨 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.taetae98.helloworld.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:text="@{viewModel.value().toString()}"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.google.android.material.button.MaterialButton
            android:text="Increase"
            android:onClickListener="@{()->viewModel.execute()}"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

---

ViewModel

View에게 필요한 필드와 메소드를 정의하고 값이 변경됐을 경우 View에게 알리는 역할을 한다.

ViewModel은 Model을 알지만 Model은 ViewModel을 모르고, MVP패턴은 View와 Presenter가 1:1 관계지만 MVVM 패턴은 ViewModel과 View가 1:N 관계다.

class MainViewModel : ViewModel() {
    private val model by lazy {
        MainModel()
    }

    fun value(): LiveData<Int> {
        return model.getValue()
    }

    fun execute() {
        model.increase()
    }
}

---

Model

Model은 데이터를 접근하고 데이터를 업데이트한다. Model은 독립적으로 존재해야 한다.

class MainModel {
    private val liveData = MutableLiveData(0)

    fun getValue(): LiveData<Int> {
        return liveData
    }

    fun increase() {
        liveData.postValue(
            (liveData.value ?: 0) + 1
        )
    }
}

---

MVVM 패턴에 맞는 ViewModel의 설계가 어렵고, 데이터 베인딩 과정에서 자원이 많이 소모된다. 하지만 Model, View, ViewModel을 분리할 수 있어서 유지보수가 좋다.