[Android] MVVM 패턴 적용기 - 1

GitHub - k906506/MVVM: 🔨 MVVM이 뭐에요?

 

요즘 MVVM 에 대해서 공부하고 있다. 지금까지 앱 구현할 때 그냥 액티비티에 다 때려박았었는데 모델이랑 뷰가 너무 강하게 결합되어 있는 느낌이 강했다. 또한 대부분의 로직을 뷰(액티비티)에서 처리하고 하고 있었고 재사용성이 매우 떨어졌었다. 실제로 겨울방학에 진행했던 글로벌인재트랙 때 어플 을 하나 만들었고 나름 분리한다고 분리했는데 진짜 재사용성이 0 이었다. MVC 가 구현하기는 정말 편했지만 이 기회에 패턴 공부도 할겸 MVVM 을 접하게 되었다. 물론 MVC 보다 MVVM 이 구현하기 어렵다. 그렇지만 불행 중 다행! 구글에서 MVVM 을 쉽게 구현할 수 있도록 AAC(Android Architecture Component) 를 지원하고 있다.

그래서 MVVM이 뭐에요?

MVVM은 Model, View, View Model 로 분리된 아키텍쳐 디자인 패턴 이다. MVC 에서 모델과 뷰의 강한 의존성, MVP 에서 뷰와 프레젠터의 강한 의존성 문제를 해결하기 위해 등장한 디자인 패턴으로 Model 은 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분이다. View 는 사용자에게 보여지는 UI 부분이고 View Model 은 View 를 위한 View Model 로, View 를 표현하기 위한 Model 을 처리하는 부분이다.

 

구글에서는 아래와 같은 아키텍쳐를 권고하고 있다.

주의깊게 봐야하는 것은 화살표의 방향 이다. 모든 화살표가 단방향으로 연결되어 있다. 액티비티와 프래그먼트는 뷰모델의 존재를 알지만 반대로 뷰모델은 액티비티와 프래그먼트의 존재에 대해 알지 못한다. 뷰모델은 레포지토리를 참조하고 레포지토리는 모델을 참조한다. 레포지토리 역시 뷰모델의 존재를 알지 못한다. 구글 공식 영상 - Build an App with Architecture Components (GDD India '17) 에서도 각 클래스의 하위 클래스만 참조할 수 있다고 언급하고 있다. 즉, 액티비티가 레포지토리를 참조해서는 안된다는 의미다.

 

라이브러리를 사용하면서 아키텍쳐 구조가 어떻게 변하는지를 보기 위해 아래와 같은 순서로 코드를 수정하면서 진행하도록 하겠다.

 

ViewBinding
-> DataBinding
-> DataBinding + ViewModel
-> DataBinding + ViewModel + LiveData

1. ViewBinding

정말 기본적인 구현 방법이라고 볼 수 있다. 액티비티 에 모든 내용을 때려박는다. findViewById 를 사용하지 않고 ViewBinding 을 사용했는데 ViewBinding, 이 친구 정말 진국이다. 한 번 사용하면 findViewById 는 거들떠도 안보게 된달까?

Activity_Main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/displayNumberTextView"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginHorizontal="18dp"
        android:gravity="center"
        android:textSize="50sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="20" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/plusButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="18dp"
        android:src="@drawable/ic_baseline_add_24"
        app:layout_constraintBottom_toBottomOf="@+id/minusButton"
        app:layout_constraintEnd_toStartOf="@+id/minusButton" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/minusButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="18dp"
        android:layout_marginBottom="18dp"
        android:src="@drawable/ic_baseline_remove_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

increase 와 decrease 를 구현하고 setOnClickListener 와 연결했다.

package com.example.basic_mvvm

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.basic_mvvm.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private val binding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }

    private var num : Int = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setContentView(binding.root)

        bindViews()
        increase()
        decrease()
    }

    private fun bindViews() {
        binding.displayNumberTextView.text = num.toString()
    }

    private fun increase() {
        binding.plusButton.setOnClickListener {
            num += 1
            binding.displayNumberTextView.text = num.toString()
        }
    }

    private fun decrease() {
        binding.minusButton.setOnClickListener {
            num -= 1
            binding.displayNumberTextView.text = num.toString()
        }
    }
}

 

이렇게 코드를 짜고 빌드를 진행해보자.

정상적으로 앱이 작동하지만 액티비티를 재실행(화면 전환)이 발생하면 값이 초기화된다. 화면 전환이 발생할 때 기존 액티비티가 onDestory 되고 다시 onCreate 되어서 발생하는 문제이다. 물론, savedInstance 를 활용하면 이를 해결할 수 있지만 viewModel 을 사용할 것이므로 우선 넘어가도록 하자. 액티비티를 재실행하면 값이 초기화된다는 것에 초점을 맞추자.

2. ViewBinding -> DataBinding

앞서 ViewBinding 으로 구현한 부분을 DataBinding 으로 변경해줬다. DataBindingUtil 을 사용한다. DataBinding 은 프로그래매틱 방법이 아닌 선언적 형식으로 레이아웃의 UI 구성요소 를 앱의 데이터 소스와 결합할 수 있게 해주는 라이브러리 이다. DataBinding 의 장점은 기존에 뷰에 정의했던 setValue 나 onClick 들을 레이아웃에 구현함으로써 뷰가 조금 더 깔끔해진다.

// 기존 코드  
binding.displayNumbertextView.text = num.toString()

// Databinding 을 사용한 코드
<TextView
    android:text="@{mainactivity.num}"/>

 

DataBinding 을 사용하기 위해선 XML 파일을 변경해줘야 한다. 기존 레이아웃 을 <layout> 으로 감싸준다. 이후 <data> 속성에서 어떤 변수를 보여줄지를 정의한다.

<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="mainactivity"
            type="com.example.basic_mvvm.MainActivity" />
    </data>

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

        <TextView
              android:text="@{mainactivity.num}"/>

        // 이하 생략

DataBinding 을 사용하면 ViewBinding 을 사용할 때보다 좀 더 관심사를 좀 더 분리시킬 수 있다. 기존에는 모든 비지니스 로직을 액티비티에 때려 박고 뷰에 대한 간단한 처리들(setValue, onClick)을 뷰에서 처리했지만 XML 에서 처리하도록 변경해줬다.

 

이제 빌드를 해보자! 

하지만 여전히 값이 저장되고 있지 않다. 다음 단계로 넘어가보자.

3. DataBinding -> DataBinding + ViewModel

AAC 의 뷰모델 이 빛을 발할 차례이다. 우선 뷰모델은 액티비티보다 긴 생명 주기를 가진다.

MainActivity.kt

뷰모델 을 사용하기 위해서는 ViewModelProviders 을 사용해야 한다. ViewModel 의 오우너, LifecycleOwner 를 넣어준다. LifecycleOnwer의 생명 주기를 따르겠다는 의미이다. (Deprecated 되었다... ViewModelProvider 를 사용하도록 하자)

package com.example.basic_mvvm
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.ViewModelProviders
import com.example.basic_mvvm.databinding.ActivityMainBinding
import com.example.basic_mvvm.viewmodel.MainViewModel

class MainActivity : AppCompatActivity() {
    private val binding by lazy {
        DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
    }

    private val viewModel by lazy {
        ViewModelProviders.of(this).get(MainViewModel::class.java)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        bindViews()
        increase()
        decrease()
    }

    private fun bindViews() {
        binding.displayNumberTextView.text = viewModel.getNumber().toString()
    }

    private fun increase() {
        binding.plusButton.setOnClickListener {
            viewModel.increase()
            binding.displayNumberTextView.text = viewModel.getNumber().toString()
        }
    }

    private fun decrease() {
        binding.minusButton.setOnClickListener {
            viewModel.decrease()
            binding.displayNumberTextView.text = viewModel.getNumber().toString()
        }
    }
}

ViewModel.kt

코드가 정말 부실하지만 num 증감에 관한 비즈니스 로직을 액티비티 에서 분리했다.

package com.example.basic_mvvm.viewmodel

import androidx.lifecycle.ViewModel

class MainViewModel : ViewModel() {
    var num: Int = 0

    fun getNumber(): Int = num

    fun increase() = num++;

    fun decrease() = num--;
}

화면이 변경되어도 값이 초기화되지 않는 것을 볼 수 있다!