ViewModel과 LiveData 함께 써보기

LiveData는 앱의 상태에 따라 데이터를 관찰하고,그에 맞게 데이터를 적용하게끔 도와주는 도구이다. 그리고 ViewModel은 생명주기가 변해도 데이터를 보존해주는 '변치 않는 데이터저장소'와 같은 역할을 하는 도구이다. 이둘을 함께 사용하면 어떻게될까?

MainViewModel.kt

class MainViewModel : ViewModel() {

    var testMutableLiveData = MutableLiveData(0)

    fun plusLiveDataValue(){
        testMutableLiveData.value = testMutableLiveData.value!!.plus(1)
    }
}

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var viewModel : MainViewModel

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

        // MainViewModel 과 연동
        viewModel = ViewModelProvider(this).get(MainViewModel::class.java)

        // 버튼을 클릭하면 viewModel에 있는 함수 실행(+1)
        findViewById<Button>(R.id.btnArea).setOnClickListener {
            viewModel.plusLiveDataValue()
        }

        // 뷰모델의 testMutableLiveData를 관찰해주고 UI에 반영
        viewModel.testMutableLiveData.observe(this, Observer {
            // 'it'은 LiveData의 현재 값을 나타내어서 위 코드와 똑같은 의미이다.
            //findViewById<TextView>(R.id.textArea).text = viewModel.testMutableLiveData.value.toString()
            findViewById<TextView>(R.id.textArea).text = it.toString()
        })
    }

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textArea"
            android:textSize="60dp"
            android:text="0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/btnArea"
            android:text="btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

결과

아래의 두 화면과 같이 livedata로 인해 버튼을 클릭을 함과 동시에 Ui가변경되고 화면을 회전해도 viewModel덕분에 데이터를 보존하여 기존과 같은 데이터를 보여주는걸 볼 수 있다.