[Kotlin] Compose 입문 #4 - ViewModel

ViewModel을 사용하지 않고, 버튼 클릭시 텍스트 변경하기

setContent {
            // 변경 가능한 State 변수를 만든다
            // remember가 없으면 상태값 변경 시 setContent를 다시 돌면서 다시 Hello로 초기화 한다
            // remember로 상태 변수를 기억하게 !
            val data = remember {
                mutableStateOf("Hello")
            }

            Column (
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                Text(
                    data.value,
                    fontSize = 30.sp,
                )
                Button(onClick = {
                    data.value = "World"
                }) {
                    Text("변경")
                }

            }

remember 변수가 없으면 버튼을 눌렀을 때 값이 변경되지 않는다

→ 다시 setContent로 돌아와서 Hello를 할당하기 때문!

💡 remember 변수는 상태 변화 값을 기억한다 !

 

이렇게 하면 버튼 클릭시 텍스트가 변경된다.

 

 

ViewModel 활용하여 전환하기

1. viewModel 생성

class MainViewModel: ViewModel() {
    // remember 없이 관리
    val data = mutableStateOf("Hellp")
}

ViewModel은 액티비티와 라이프사이클을 동일하게 가져간다

따라서, remember를 신경쓰지 않아도 된다 !

1. viewModel 선언

class ViewModelActivity : ComponentActivity() {
    // 뷰모델 사용하기
    private val viewModel by viewModels<MainViewModel>()

1. data.value를 viewMdoel.data.value로 변경

Text(
                    viewModel.data.value,
                    fontSize = 30.sp,
                )
                Button(onClick = {
                    viewModel.data.value = "World"
                }) {
                    Text("변경")
                }

동일하게 텍스트가 변화한다

Compose 안에서 ViewModel 사용하기

1. Gradle 설정

// ViewModel
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.0-rc01'

1. Compose 안에 선언

setContent {
            // Compose 안에서 뷰모델 사용
            val viewModel = viewModel<MainViewModel>()

뷰모델을 사용할 때 데이터를 외부에 공개하지 않는다

→ 뷰 쪽에서 데이터를 마음대로 조작할 수 있으므로 그것을 방지한다

뷰모델에서는 외부에서 접근이 안되도록 막는다

class MainViewModel: ViewModel() {
    // remember 없이 관리
    // 외부에서 볼 수 없도록 막는다
    private val _data = mutableStateOf("Hello")

읽기 전용으로 공개한다 → 외부에서 수정할 수 없음

val data: State<String> = _data

위처럼 수정하게 되면

Button(onClick ={
	viewModel.data.value = "World"
})

해당 view 코드에서 데이터에 접근하여 수정할 경우 에러가 발생한다

뷰모델에서 데이터 수정 메서드를 지정한다

class MainViewModel: ViewModel() {
    // remember 없이 관리
    // 외부에서 볼 수 없도록 막는다
    private val _data = mutableStateOf("Hello")

    // 읽기 전용 State 형식으로 공개 -> 외부에서 수정 불가
    val data: State<String> = _data

    // 외부에서 데이터를 수정하는 메서드 지정
    fun changeValue() {
        _data.value = "World"
    }
}

텍스트 변경은 버튼 클릭시

setContent {
            // Compose 안에서 뷰모델 사용
            val viewModel = viewModel<MainViewModel>()
            Column (
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                Text(
                    viewModel.data.value,
                    fontSize = 30.sp,
                )
                Button(onClick = {
                    viewModel.changeValue()
                }) {
                    Text("변경")
                }

            }
        }

viewModel의 데이터 수정 메서드를 가져온다