뷰모델 (ViewModel)

1. 뷰모델(ViewModel) 이란 ?

ViewModel 클래스는 라이프 사이클을 파악하여

 

UI 와 관련된 데이터를 저장하고 관리하기 위해 만들어 졌다.

 

ViewModel 클래스는 스크린 회전과 같은 구성 변경에서 데이터가 유지될 수 있도록 한다.

 

예제를 통해 바로 알아보도록 하자.

 

 

2. 예제

오늘 만들 예제는 간단하게 더하기 버튼을 누르면

 

텍스트뷰의 숫자가 +1 씩 증가하고 빼기 버튼을 누르면 숫자가 -1씩 감소하는

 

간단한 예제를 만들어서 진행해 볼 것이다.

 

 

먼저 MViewModel 이라는 ViewModel 클래스를 작성해 보자.

 

 

 

MViewModel class

package com.example.viewmodel_test

import androidx.lifecycle.ViewModel

class MViewModel : ViewModel(){

    var result : Int = 0

    // 숫자가 하나씩 증가하는 메서드
    fun plus() : Int {

        result += 1

        return result
    }

    // 숫자가 하나씩 감소하는 메서드
    fun minus() : Int {

        result -= 1

        return result
    }

}

 

 

 

 

메인 액티비티 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:text="0"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:textSize="50sp"/>

    <LinearLayout
        android:layout_marginHorizontal="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/minusButton"
            android:layout_margin="10dp"
            android:text="빼기"
            android:textSize="20sp"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/plusButton"
            android:layout_margin="10dp"
            android:text="더하기"
            android:textSize="20sp"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</LinearLayout>

 

 

 

 

메인 액티비티

package com.example.viewmodel_test

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.TextView
import androidx.lifecycle.ViewModelProvider

class MainActivity : AppCompatActivity() {

    lateinit var mViewModel : MViewModel

    lateinit var textView: TextView
    lateinit var minusButton: Button
    lateinit var plusButton: Button

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

        // 뷰모델 초기화
        mViewModel = ViewModelProvider(this).get(MViewModel::class.java)

        // 뷰 초기화
        textView = findViewById(R.id.textView)
        minusButton = findViewById(R.id.minusButton)
        plusButton = findViewById(R.id.plusButton)

        // 텍스트뷰의 텍스트 값 초기화
        textView.text = mViewModel.result.toString()

        // 더하기 버튼 클릭 리스너
        plusButton.setOnClickListener {

            textView.text = mViewModel.plus().toString()

        }

        // 빼기 버튼 클릭 리스너
        minusButton.setOnClickListener {

            textView.text = mViewModel.minus().toString()

        }

    }

}

 

 

 

 

실행 결과

실행 결과

 

더하기를 누르면 텍스트뷰의 숫자가 오르고 빼기를 누르면 텍스트뷰의 숫자가 감소하는걸 확인할 수 있다.

 

그런 후에 화면을 회전하게 되었을때 데이터가 어떻게 되는지 한번 확인해보자.

 

 

 

화면 회전 했을 때

화면 회전 했을 때

 

회전하기 전의 데이터가 그대로 유지되는걸 볼 수 있다.

 

이러한 데이터가 유지되는것이 가능한게 바로 AAC ViewModel 이다.

 

그런데 화면 회전을 했을때 무엇이 변하길래 데이터 변화가 없게 하기위해서 AAC ViewModel을 사용하는가?

 

 

생명주기에 로그를 찍어서 화면을 회전했을때 생명주기가 어떻게 바뀌는지 확인해보자.

액티비티 맨 첫 onCreate() 부터

 

맨처음 액티비티가 onCreate() 가 호출되고 onResume() 까지 호출된다.

 

그런 다음 화면을 회전 했을때 onPause() 에서 onStop() , onDestroy() 까지 호출이 된 후에

 

다시 onCreate() 부터 onResume() 까지 호출이 된다.

 

결국 액티비티가 다시 만들어 지게 되는것인데 AAC ViewModel을 사용하여

 

이러한 상태변화에도 데이터를 유지할 수 있는것이다.

 

 

3. AAC ViewModel 과 MVVM 디자인 패턴에서의 ViewModel

AAC ViewModel을 공부하면서 가장 많이 본 주제인것 같다.

 

AAC ViewModel 과 MVVM 디자인 패턴에서의 ViewModel의 차이점이다.

 

이름은 같지만 둘은 완전히 다른 개념이다.

 

 

 

 

한눈에 표로 나타내면 위의 표처럼 볼 수 있다.

 

MVVM ViewModel 은 디자인 패턴에서 ViewModel의 역할에 관련된 클래스 이고

 

ViewModel은 UI 관련 데이터를 저장하고 관리하는 요소이자 라이브러리 이다.

 

MVVM 디자인 패턴의 ViewModle은 디자인 패턴을 공부하며 다시한번 포스팅 할 예정이다.

 

사실 이 차이를 이해하기 위해서는 디자인 패턴에 대한 이해도도 어느정도 필요로 하는 것 같았다.

 

이러한 AAC ViewModel 을 사용하여 다양한 상황에 맞게 사용하면 유용할 것 같다.

 

 

아래는 예제 깃허브 주소 입니다.

nam-su/ViewModelExample: AAC ViewModelExample (github.com)

GitHub - nam-su/ViewModelExample: AAC ViewModelExample