Compose 기초 - ViewModel

황준하·2023년 1월 28일
0

Android-Kotlin-Compose

목록 보기
7/9
  • 전체코드
    package com.example.modern_android_viewmodel_20230127
    
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import androidx.activity.viewModels
    import androidx.compose.foundation.layout.Arrangement
    import androidx.compose.foundation.layout.Column
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.material.Button
    import androidx.compose.material.Text
    import androidx.compose.runtime.State
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.ui.Alignment
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.unit.sp
    import androidx.lifecycle.ViewModel
    import androidx.lifecycle.viewmodel.compose.viewModel
    
    class MainActivity : ComponentActivity() {
    //    private val viewModel by viewModels<MainViewModel>()
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            setContent {
                val viewModel = viewModel<MainViewModel>()
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Text(
                        viewModel.data.value,
                        fontSize = 30.sp,
                    )
                    Button(onClick = {
    //                    viewModel.data.value = "World"
                        viewModel.changeValue()
                    }) {
                        Text(text = "변경")
                    }
                }
            }
        }
    }
    
    class MainViewModel : ViewModel() {
        // view에서 임의로 수정 못하게 private 처리
        private val _data = mutableStateOf("Hello")
        // 외부에서는 읽기 전용으로 제공
        val data: State<String> = _data
    
        // 수정은 메서드
        fun changeValue() {
            _data.value = "World"
        }
    }
  • 사용방법
    ViewModel 클래스는 비즈니스 로직 또는 화면 수준 상태 홀더이다. UI에 상태를 노출하고 관련 비즈니스 로직을 캡슐화한다. 주요 이점은 상태를 캐시하여 구성 변경에도 이를 유지한다는 것입니다. 즉, 활동 간에 이동하거나 구성 변경(예: 화면 회전 시)을 따를 때 UI가 데이터를 다시 가져올 필요가 없다.
    ```kotlin
    // ViewModel
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    ```
    
    ViewModel를 사용하기 위해서는 Module 단위의 gradle에 위 코드를 추가해야된다.
    
    ```kotlin
    class MainViewModel : ViewModel() {
        // view에서 임의로 수정 못하게 private 처리
        private val _data =mutableStateOf("Hello")
        // 외부에서는 읽기 전용으로 제공
        val data: State<String> = _data
    
        // 수정은 메서드
        fun changeValue() {
            _data.value = "World"
        }
    }
    ```
    
    ViewModel 클래스를 생성한 후 view에서 임의로 수정 못하게 private 처리한 후 외부에는 읽기 전용으로 만들어준다. 수정을 위해서 메서드를 따로 만들어줘야 안전한 앱을 구성할 수 있다.
    
    ```kotlin
    val viewModel = viewModel<MainViewModel>()
    ```
    
    viewModel을 얻기 위해 선언 후
    
    ```kotlin
    Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
    ){
    		Text(
    				viewModel.data.value,
    				fontSize = 30.sp,
    		)
    		Button(onClick ={
    				//viewModel.data.value = "World"
    				viewModel.changeValue()
    		}){
    				Text(text = "변경")
    			}
    }
    ```
    
    viewModel.data.value로 데이터를 불러 넣어주고  viewModel.changeValue()로 데이터 수정요청을 한다.

틀린 부분 지적은 언제나 환영해요🤗
profile
Xlnt한 날까지 노력하는 개발자

0개의 댓글