개념 정리 : 뷰 모델

1. 정의

뷰 모델은 안드로이드 앱 아키텍처 컴포넌트 중 하나로, UI와 비즈니스 로직 사이의 중간 매개체 역할을 한다.

뷰 모델은 UI 구성 요소에서 사용하는 데이터를 관리하고, 이 데이터를 유지하면서 화면 회전과 같은 구성 변경에 대한 생명주기 이벤트를 처리한다. 뷰 모델을 사용하면 화면 구성 변경과 같은 이벤트가 발생할 때, 데이터를 다시 불러오지 않고 기존 데이터를 유지하면서 UI를 업데이트 할 수 있다.

 

일반적으로 뷰 모델은 뷰에 필요한 데이터를 불러오기 위해 Repository나 Use Case와 같은 데이터 관리 레이어와 상호 작용하며, 데이터를 가공하고 뷰에 보여줄 준비를 한다. 이를 통해 뷰 모델은 뷰에서 비즈니스 로직을 분리하고, 유지보수성과 테스트 용이성을 향상하는데 도움을 준다.

생명 주기와 뷰 모델의 관련성을 나타낸 그림

 

2. 사용 예시

정의를 주구장창 늘어놓는 것보다 뷰 모델을 잘 나타내는 하나의 예시를 들어보기로 하였다.

개발 배경은 To-Do List 앱을 개발 중에서, 사용자가 To-Do 아이템을 추가하거나 수정하거나 삭제할 때마다 UI 업데이트를 해야 한다. 또한, 앱의 생명주기 이벤트에 대응하여 To-Do 아이템 데이터를 저장하고 복원해야 합니다. 이러한 요구사항을 수정하기 위한 뷰 모델을 만들어 볼 것이다.

 

2-1. build.gradle 파일에 의존성 추가

implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1"

 

2-2. To-Do 관련 클래스 제작

[TodoRepository]

To-do 아이템 데이터를 가져오고 저장하는 메서드를 제공한다.

class TodoRepository {
    private val todoItems = ArrayList<TodoItem>()

    fun getTodoItems(): List<TodoItem> {
        return todoItems
    }

    fun addTodoItem(item: TodoItem) {
        todoItems.add(item)
    }

    fun updateTodoItem(item: TodoItem) {
        val index = todoItems.indexOfFirst { it.id == item.id }
        if (index != -1) {
            todoItems[index] = item
        }
    }

    fun deleteTodoItem(item: TodoItem) {
        todoItems.remove(item)
    }
}

 

[TodoItem]

To-Do 아이템을 나타내는 데이터 클래스

data class TodoItem(val id: Int, var title: String, var isCompleted: Boolean)

 

[TodoViewModel]

Repository와 상호 작용하여 데이터를 가져오고 저장하며, 생명주기 이벤트를 처리하는 ViewModel 클래스

class TodoViewModel(private val repository: TodoRepository) : ViewModel() {

    fun getTodoItems(): List<TodoItem> {
        return repository.getTodoItems()
    }

    fun addTodoItem(item: TodoItem) {
        repository.addTodoItem(item)
    }

    fun updateTodoItem(item: TodoItem) {
        repository.updateTodoItem(item)
    }

    fun deleteTodoItem(item: TodoItem) {
        repository.deleteTodoItem(item)
    }
}

 

[TodoAdapter, TodoViewHolder, TodoItemDiffCallback]

TodoAdapter : RecyclerView.Adapter을 상속 받아 RecyclerView에서 데이터를 표시.

TodoViewHolder : To-Do 아이템 하나를 나타내는 View를 가지고 있는 클래스.

TodoItemDiffCallback : RecyclerView의 데이터 변경 감지 처리.

class TodoAdapter : ListAdapter<TodoItem, TodoViewHolder>(TodoItemDiffCallback()) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TodoViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        val view = inflater.inflate(R.layout.item_todo, parent, false)
        return TodoViewHolder(view)
    }

    override fun onBindViewHolder(holder: TodoViewHolder, position: Int) {
        val item = getItem(position)
        holder.bind(item)
    }
}

class TodoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    private val titleTextView: TextView = itemView.findViewById(R.id.todoTitleTextView)
    private val statusImageView: ImageView = itemView.findViewById(R.id.todoStatusImageView)

    fun bind(item: TodoItem) {
        titleTextView.text = item.title
        if (item.isCompleted) {
            statusImageView.setImageResource(R.drawable.ic_check_circle)
        } else {
            statusImageView.setImageResource(R.drawable.ic_check_circle_outline)
        }
    }
}

class TodoItemDiffCallback : DiffUtil.ItemCallback<TodoItem>() {
    override fun areItemsTheSame(oldItem: TodoItem, newItem: TodoItem): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: TodoItem, newItem: TodoItem): Boolean {
        return oldItem == newItem
    }
}

 

[activity_main.xml]

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

    <EditText
        android:id="@+id/todoEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Add a new todo item"
        android:inputType="text"
        android:maxLines="1"
        android:imeOptions="actionDone"
        app:layout_constraintEnd_toStartOf="@+id/addTodoButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/addTodoButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/todoEditText"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:listitem="@layout/item_todo" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

[item_todo.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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/todoTitleTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        app:layout_constraintEnd_toStartOf="@+id/todoStatusImageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVerticalBias="0.5"
        app:layout_constraintHorizontal_bias="0"/>

    <ImageView
        android:id="@+id/todoStatusImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVerticalBias="0.5"
        app:layout_constraintHorizontal_bias="1"
        android:src="@drawable/ic_check_circle_outline" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

[MainActivity]

class MainActivity : AppCompatActivity() {

    private val viewModel: TodoViewModel by viewModels()

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

        val adapter = TodoAdapter()

        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = adapter

        addTodoButton.setOnClickListener {
            val title = todoEditText.text.toString()
            val item = TodoItem(0, title, false)
            viewModel.addTodoItem(item)
        }

        viewModel.getTodoItems().observe(this, { items ->
            adapter.submitList(items)
        })
    }
}

 

3. 참고 사이트

ViewModel 개요  |  Android 개발자  |  Android Developers