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
ViewModel을 사용하면 수명 주기를 인식하는 방식으로 UI 데이터를 관리할 수 있습니다.
developer.android.com
'Kotlin > 개념 정리' 카테고리의 다른 글
| 개념 정리: JSON 구조 (0) | 2023.03.08 |
|---|---|
| 개념 정리: Retrofit2 사용 법 (0) | 2023.03.08 |
| 개념 정리 : 라이브 데이터(Live Data) (0) | 2023.02.17 |
| 개념 정리 : 데이터 바인딩 (0) | 2023.02.17 |
| 개념 정리 : 뷰 바인딩 (0) | 2023.02.17 |