뷰 모델 View Model

앱 제작 시 안드로이드 생명 주기에 따라 회전 처리가 이루어지면 앱의 데이터가 날라가 버리게됩니다.

이러한 부분을 방지하기 위해 뷰 모델 클래스를 사용됩니다. 뷰 모델을 사용하면, 화면 회전 같은 변경된 구성에서도 데이터를 계속 유지할 수 있습니다.

 

우선, 아래의 이미지를 먼저 확인해 봅시다.

액티비티 생명주기가 진행되는데, 회전이 이루어지면 onPause ~ onDestroy ~ onCreate 등과 같이 액티비티가 없어지고 재생산됩니다. 뷰 모델 클래스 안에 데이터가 구현되는 담게 되면, 구성이 변경되더라도 담고 있는 내용이 유지되고 onCleared가 호출됩니다.

출처: https://developer.android.com

그럼 뷰 모델 클래스의 기본 코드를 살펴 봅시다.

아래와 같이 ViewModel을 상속받아, 나만의 뷰 모델 클래스를 작성해주면 됩니다. 클래스 안에 필요한 변수나 메소드를 정의해 줍니다.

반응형

class MyViewModel : ViewModel() {
    private val users: MutableLiveData<List<User>> by lazy {
        MutableLiveData<List<User>>().also {
            loadUsers()
        }
    }

    fun getUsers(): LiveData<List<User>> {
        return users
    }

    private fun loadUsers() {
      
    }
}

 

뷰 모델 클래스를 만들면, 다음의 액티비티 클래스에서 뷰 모델을 사용하면 됩니다. by viewModels() 지시어를 통해서 직접 만든 뷰 모델을 model에 담아줍니다. 

이후로 뷰 모델 클래스에 정의되었던, getUsers(): LiveData<List<User>> 메소드에 observe 메소드를 사용합니다. 해당 함수를 관찰하다가 데이터가 변경되면, users로 넘겨 받아 함수 블록 부분에서 UI를 업데이트해주는 형태입니다.

class MyActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        val model: MyViewModel by viewModels()
        model.getUsers().observe(this, Observer<List<User>>{ users ->
 
        })
    }
}

 

그럼 실제로 뷰모델을 어떻게 사용하는지 알아보겠습니다.

 

뷰모델을 실제로 사용하려면 KTX 모듈 아티팩트를 gradle 모듈 단위에 정의해줘야 합니다. 아래와 같이 build.gradle의 모듈 단위에 아티팩트 사용을 위한 KTX를 implementation합니다.

dependencies {
    implementation "androidx.fragment:fragment-ktx:1.3.6"
}

뷰 모델을 사용하려면, 자바 가상 머신이 자바 8의 언어 기능과 API를 사용할 수 있도록 해야 합니다. 따라서 Android Gradle 플러그인의 버전에 따라, build.gradle 모듈 단위에 아래와 같은 코드를 심어주도록 합니다.

* Android Gradle 플러그인 3.0.0 이상

android {
  kotlinOptions {
          jvmTarget = "1.8"
  }
}

* Android Gradle 플러그인 4.0.0 이상

dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:1.1.5")
}

 

메인 액티비티에 먼저 뷰 모델을 사용하도록 선언합니다. by 지시어를 이용한 점을 잊지 마시기 바랍니다.

private val viewModel: MainViewModel by viewModels()

 

준비가 되면, 뷰 모델 클래스를 만들어줍니다. 뷰 모델에 필요한 데이터와 메소드를 구현해줍니다.

class MainViewModel: ViewModel(){
    val data = arrayListOf<Todo>()

    fun toggleTodo(todo: Todo) {
        todo.isDone = !todo.isDone

    }

    fun addTodo(todo: Todo){
        data.add(todo)

    }

    fun deleteTodo(todo: Todo){
        data.remove(todo)

    }
}

 

그리고 onCreate 메소드 부분에서 뷰 모델을 통해 원하는 데이터와 메소드를 사용합니다. viewModel.data, viewModel.addTodo, viewModel.deleteTodo, viewModel.toggleTodo 에서 보다시피, 뷰 모델로 필요한 데이터와 메소드에 접근하고 있습니다.

binding.recyclerView.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = TodoAdapter(
                viewModel.data,
                onClickDeleteIcon = {
                   viewModel.deleteTodo(it)
                },
                onClickItem = {
                    viewModel.toggleTodo(it)
                }
            )
}


binding.addButton.setOnClickListener {
            val todo = Todo(binding.editText.text.toString())
            viewModel.addTodo(todo)
}

 

그럼 뷰 모델에 대한 설명을 마치겠습니다.