[Android] MVVM 패턴 적용기 - 2

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

 

MVVM 두 번째 시간이다. 갑작스럽게 찾아온 이유는 졸프를 진행하다가 RecyclerView 를 Room 을 사용해서 MVVM 패턴 으로 구현했는데 정상적으로 작동하지 않아서 RecyclerView + Room + MVVM 을 정리하고 코드를 다시 보려고 한다.

우선 MVVM 을 구현하기 위해서는 위의 그림을 이해하고 넘어가는 것이 좋다. 그림에서 주의깊게 봐야할 것은 화살표의 방향 이다. 모든 화살표가 단방향으로 연결 되어있고 상위 요소는 하위 요소를 참조한다. 참조할 때 바로 아래에 있는 요소만 참조 가능하다. 가령 Activity 와 Fragment 가 바로 아래 있는 ViewModel 이 아닌 Respository 를 참조하면 안된다. 이 개념을 머리에 새겨두고 간단한 어플리케이션을 구현해보자.

 

우선 어플리케이션의 전체적인 구조와 구현 모습은 아래와 같다.

전체적인 구조

구현 모습

activity_main.xml

<?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">

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

        <EditText
            android:id="@+id/editTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:ellipsize="end"
            android:hint="상품 정보를 입력하세요."
            android:inputType="text"
            android:lines="1"
            android:maxLines="1"
            app:layout_constraintBottom_toTopOf="@+id/btn_add"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_add"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            android:text="추가"
            app:layout_constraintBottom_toTopOf="@+id/recyclerView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editTextView" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="12dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/btn_add" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

우선 레이아웃 부터 구현했다. 상단에 EditTextView 바로 아래에 등록 버튼 하단에는 등록된 상품을 보여주는 RecyclerView 를 배치했다.

item_main.xml

<?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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="12dp">

        <androidx.cardview.widget.CardView
            android:id="@+id/itemCardView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:backgroundTint="#C5E1A5"
            app:cardCornerRadius="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

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

                <TextView
                    android:id="@+id/itemTextView"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_margin="12dp"
                    android:ellipsize="end"
                    android:gravity="center"
                    android:lines="1"
                    android:maxLines="1"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/btn_remove"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="미리보기용 텍스트입니다." />

                <ImageButton
                    android:id="@+id/btn_remove"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="12dp"
                    android:background="@drawable/ic_baseline_delete_forever_24"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/itemTextView"
                    app:layout_constraintTop_toTopOf="parent" />


            </androidx.constraintlayout.widget.ConstraintLayout>


        </androidx.cardview.widget.CardView>


    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

RecyclerView 에서 보여줄 아이템에 대한 레이아웃 을 구현했다.

 

코드를 적용하면 아래와 같은 UI를 가진다.

대충 이런 형태

Product

package com.example.mvvm_recyclerview_room.database

import androidx.room.Entity
import androidx.room.PrimaryKey

@Entity
data class Product(
    @PrimaryKey(autoGenerate = true) val id: Int?,
    val title: String
)

일반적인 DataClass 에 Entity 라는 어노테이션 을 추가했다. 또한 PrimaryKey 로 사용하기 위해 id 를 지정해줬고 이 부분은 사용자가 입력하는 것이 아니라 자동으로 시스템에서 입력될 수 있도록 autoGenerate = true 속성을 부여했다.

ProductDao

package com.example.mvvm_recyclerview_room.database

import androidx.lifecycle.LiveData
import androidx.room.*

@Dao
interface ProductDao {
    @Insert
    suspend fun insert(product: Product)

    @Update
    suspend fun update(product: Product)

    @Delete
    suspend fun delete(product: Product)

    @Query("SELECT * FROM product")
    fun getAll(): LiveData<List<Product>>
}

suspend 라는 처음 보는 키워드가 등장했다. suspend 는 일시 중단에 사용하는 함수로 해당 메소드가 호출될 때 일시 중단된다. 따라서 코루틴 블럭 내부 이나 다른 일시 중단 함수 내부 에서 실행되어져야만 한다.

ProductDatabase

package com.example.mvvm_recyclerview_room.database

import android.content.Context
import androidx.room.Database
import androidx.room.Room
import androidx.room.RoomDatabase

@Database(entities = [Product::class], version = 1)
abstract class ProductDatabase : RoomDatabase() {
    abstract fun productDao(): ProductDao

    companion object {
        private var instance: ProductDatabase? = null

        @Synchronized
        fun getInstance(context: Context): ProductDatabase? {
            if (instance == null) {
                synchronized(ProductDatabase::class) {
                    instance = Room.databaseBuilder(
                        context.applicationContext,
                        ProductDatabase::class.java,
                        "product-database"
                    ).build()
                }
            }
            return instance
        }
    }
}

위에서 구현한 Entity 를 가지고 실제 데이터베이스 를 구현한다. 싱글톤 패턴으로 생성했다.

Repository && RepositoryImpl

package com.example.mvvm_recyclerview_room.repository

import androidx.lifecycle.LiveData
import com.example.mvvm_recyclerview_room.database.Product

interface ProductRepository {
    suspend fun insert(product: Product)

    suspend fun update(product: Product)

    suspend fun delete(product: Product)

    fun getAll(): LiveData<List<Product>>
}

package com.example.mvvm_recyclerview_room.repository

import android.app.Application
import androidx.lifecycle.LiveData
import com.example.mvvm_recyclerview_room.database.Product
import com.example.mvvm_recyclerview_room.database.ProductDatabase

class ProductRepositoryImpl(application: Application) : ProductRepository {
    private val productDao by lazy {
        ProductDatabase.getInstance(application)!!.productDao()
    }

    override suspend fun insert(product: Product) {
        productDao.insert(product)
    }

    override suspend fun update(product: Product) {
        productDao.update(product)
    }

    override suspend fun delete(product: Product) {
        productDao.delete(product)
    }

    override fun getAll(): LiveData<List<Product>> {
        return productDao.getAll()

    }
}

Activity - ViewModel - Respository - Data 라는 큰 틀에서 봤을 때 Interface 역할을 수행한다. Respository 로 인해서 ViewModel 이 직접적으로 데이터를 관리할 필요가 없어진다. 위에서 구현한 Dao 가 suspend 이므로 이를 호출하는 메소드 역시 suspend 로 구현한다.

ProductViewModel

package com.example.mvvm_recyclerview_room.viewmodel

import android.app.Application
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.LiveData
import com.example.mvvm_recyclerview_room.database.Product
import com.example.mvvm_recyclerview_room.repository.ProductRepositoryImpl

class ProductViewModel(application: Application) : AndroidViewModel(application) {
    private val repository = ProductRepositoryImpl(application)
    private val products = repository.getAll()

    suspend fun insert(product: Product) {
        repository.insert(product)
    }

    suspend fun update(product: Product) {
        repository.update(product)
    }

    suspend fun delete(product: Product) {
        repository.delete(product)
    }

    fun getAll(): LiveData<List<Product>> {
        return products
    }
}

repository 를 통해 데이터에 대한 CRUD 을 진행한다. 역시 repository 의 suspend 를 호출하므로 suspend 로 구현한다.

BaseActivity

package com.example.mvvm_recyclerview_room.base

import android.os.Bundle
import androidx.annotation.LayoutRes
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.databinding.ViewDataBinding

abstract class BaseActivity<T : ViewDataBinding>(@LayoutRes private val layoutResId: Int) :
    AppCompatActivity() {
    private var _binding: T? = null
    val binding get() = _binding ?: error("Not Initialized")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        _binding = DataBindingUtil.setContentView(this@BaseActivity, layoutResId)
        binding.lifecycleOwner = this@BaseActivity
    }
}

작업하기 앞서 BaseActivity 를 구현했다. 물론 굳이? 구현할 필요 없는 클래스이다. 그냥 바로 AppCompatActivity 를 상속받아서 구현해도 된다. 하지만 다른 프로젝트에서 Activity 나 Fragment에서 겹치는 코드들을 Base 로 분리하고 작업하니까 중복되는 코드가 확실히 줄어서 편했다. 지금 이 프로젝트는 Single Activity 이지만 손에 익히고자 BaseActivity 로 분리했다.

 

BaseActivity 에 무엇을 구현할지는 개발자의 입맛인 것 같다. 그래도 기본적으로 있어야하는 것은 연결해 줄 DataBinding 과 onCreate 이다. DataBinding 역시 직접적으로 연결해주지 않고 private 로 구현하고 외부에서 참조할 떄는 별도의 변수로 접근하는 방식으로 구현했다.

MainActivity

package com.example.mvvm_recyclerview_room

import android.os.Bundle
import androidx.lifecycle.ViewModelProvider
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.mvvm_recyclerview_room.adapter.ProductAdapter
import com.example.mvvm_recyclerview_room.base.BaseActivity
import com.example.mvvm_recyclerview_room.database.Product
import com.example.mvvm_recyclerview_room.databinding.ActivityMainBinding
import com.example.mvvm_recyclerview_room.viewmodel.ProductViewModel
import kotlinx.coroutines.*

class MainActivity : BaseActivity<ActivityMainBinding>(R.layout.activity_main) {
    private val viewModel by lazy {
        ViewModelProvider(this)[ProductViewModel::class.java]
    }

    private val adapter by lazy {
        ProductAdapter(itemClickListener = { product ->
            deleteProduct(product)
        })
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        initViews()
        bindViews()
        subscribeObserver()
    }

    private fun initViews() = with(binding) {
        recyclerView.layoutManager = LinearLayoutManager(this@MainActivity)
        recyclerView.adapter = adapter
    }

    private fun bindViews() = with(binding) {
        btnAdd.setOnClickListener {
            insertProduct(editTextView.text.toString())
        }
    }

    private fun subscribeObserver() {
        viewModel.getAll().observe(this) { adapter.submitList(it) }
    }

    private fun insertProduct(title: String) {
        CoroutineScope(Dispatchers.IO).launch {
            viewModel.insert(Product(id = null, title = title))
        }
    }

    private fun deleteProduct(product: Product) {
        CoroutineScope(Dispatchers.IO).launch {
            viewModel.delete(product)
        }
    }

}

abstract 로 구현한 BaseActivity 를 상속받고 ViewModel 은 ViewModelProvider 를 사용하여 구현한다. (ViewModelProviders는 Deprecated 되었다.) RecyclerView 와 연결해 줄 Adapter도 구현하고 LayoutManager 를 지정해준다.

 

subcribeObserver 와 insertProduct deleteProduct 가 눈에 띈다. subcribeObserver 는 viewModel.getAll() 을 관찰하고 있다가 변화가 일어나면 RecyclerView 에 표시할 아이템(리스트)를 갱신해주는 메소드인 adapter.submistList 를 실행한다.

 

설명을 위해 잠깐 ProductAdapter 로 이동해보자.

ProductAdapter

package com.example.mvvm_recyclerview_room.adapter

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.example.mvvm_recyclerview_room.database.Product
import com.example.mvvm_recyclerview_room.databinding.ItemMainBinding

class ProductAdapter(private val itemClickListener: (Product) -> Unit) :
    RecyclerView.Adapter<ProductAdapter.ViewHolder>() {
    private var products: List<Product>? = null

    inner class ViewHolder(private val binding: ItemMainBinding) :
        RecyclerView.ViewHolder(binding.root) {
        fun bindViews(product: Product) {
            binding.itemTextView.text = product.title

            binding.btnRemove.setOnClickListener {
                itemClickListener(product)A
            }
        }

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(
            ItemMainBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
        )
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        products?.let {
            holder.bindViews(it[position])
        }
    }

    override fun getItemCount(): Int {
        return products?.size ?: 0
    }

    fun submitList(items: List<Product>) {
        products = items
        notifyDataSetChanged()
    }
}

대부분의 코드는 기존 RecyclerView 의 Adapter 와 매우 유사하다. itemClickListener 를 통해 Product 를 전달하고 이를 MainActivity 에서 사용할 수 있게끔 한다. 위에서 설명한 submitList 는 전달 받은 아이템(리스트)로 갱신한다. notifyDataSetChanged 를 사용하여 RecyclerView 에 알린다.

MainActivity

    private fun insertProduct(title: String) {
        CoroutineScope(Dispatchers.IO).launch {
            viewModel.insert(Product(id = null, title = title))
        }
    }

    private fun deleteProduct(product: Product) {
        CoroutineScope(Dispatchers.IO).launch {
            viewModel.delete(product)
        }
    }

다시 MainActivity 로 넘어왔다. 두 개의 메소드는 Room 으로 구현한 내장 데이터베이스에 항목을 추가하고 삭제하는 기능이다. insert 와 delete 에서는 코루틴 이라는 새로운 개념이 등장하는데 네트워킹 작업 이나 데이터베이스 작업 의 경우 메인 쓰레드 에서 작업하면 안된다. 이런 간단한 프로젝트는 괜찮지만 무거운 작업을 메인 쓰레드에서 작업하게 되면 ANR(Application Not Responding) 이 발생하면서 앱이 강제종료 되고 사용자에게 불편함을 줄 것이다. 이를 해결하기 위해 UI 작업 을 제외하고 다른 쓰레드에서 진행하는데 이를 도와주는 것이 코루틴 이다. CoroutineScope 으로 실행된 범위를 지정하고 Dispatcher 로 어떤 쓰레드 에서 작업할지를 지정한다.

구현 결과

구현 모습

느낀 점

사실 지금 이렇게 보니 잘못 구현되었다고 생각한다. MainActivity 에서는 Data 에 대한 접근을 지양해야하는데 지금 구현한 코드를 보면 Product 객체를 생성해서 전달하고 있다. 다시 고쳐봐야겠다.