07. Kotlin-viewModel

Jetpack Compose에서 ViewModel 사용하기: 심층 가이드 (MainActivity.kt & ViewModel.kt 활용)

Jetpack Compose는 상태 관리, UI 업데이트, 생명주기 관리를 간편하게 처리하는 데 도움을 주는 선언적 UI 툴킷입니다. ViewModel은 Jetpack Compose와 함께 사용하면 앱 데이터를 안전하게 저장하고 UI와 분리하여 앱 개발을 한 단계 더 향상시킬 수 있습니다.

이 가이드에서는 ViewModel을 MainActivity.kt와 ViewModel.kt 두 개의 파일로 나누어 구현하는 방법을 단계별로 자세히 설명합니다.

1. 프로젝트 설정:

• Android Studio에서 새 프로젝트를 만들고 Empty Compose Activity 템플릿을 선택합니다.
• MainActivity.kt와 ViewModel.kt라는 두 개의 Kotlin 파일을 만듭니다.

2. 의존성 추가:

• build.gradle (Module: app) 파일에 다음 의존성을 추가합니다.

Gradle

dependencies {
    // ...

    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
}

3. ViewModel 클래스 작성:

• ViewModel.kt 파일에 다음 코드를 추가합니다.

Kotlin

package com.example.yourapp

import androidx.lifecycle.ViewModel

class MyViewModel : ViewModel() {
    // 상태 변수 선언
    private val _message = MutableStateFlow("초기 메시지")
    val message: StateFlow<String> = _message

    // 메시지 업데이트 함수
    fun updateMessage(newMessage: String) {
        _message.value = newMessage
    }
}

4. MainActivity에서 ViewModel 사용:

• MainActivity.kt 파일에 다음 코드를 추가합니다.

Kotlin

package com.example.yourapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.yourapp.ui.GreetingScreen

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // ViewModel 가져오기
            val viewModel = viewModel<MyViewModel>()

            GreetingScreen(viewModel = viewModel)
        }
    }
}

5. GreetingScreen 컴포저블 함수:

• GreetingScreen.kt라는 새 파일을 만들고 다음 코드를 추가합니다.

Kotlin

package com.example.yourapp

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun GreetingScreen(viewModel: MyViewModel) {
    var message by remember { mutableStateOf(viewModel.message.value) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = message)

        Spacer(modifier = Modifier.height(16.dp))

        TextField(
            value = message,
            onValueChange = { message = it },
            label = { Text("메시지 입력") }
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { viewModel.updateMessage(message) }) {
            Text("메시지 업데이트")
        }
    }
}

6. 실행 및 확인:

• 앱을 실행하면 UI에 "초기 메시지"가 표시됩니다.
• 텍스트 필드에 메시지를 입력하고 "메시지 업데이트" 버튼을 클릭하면 UI에 입력한 메시지가 표시됩니다.

참고:

• 이 예제는 기본적인 ViewModel 사용법을 보여주는 것입니다. 실제 앱에서는 더 복잡한 데이터 모델, 비즈니스 로직, UI 상호 작용을 처리해야 할 수도 있습니다.
• ViewModel에 대한 자세한 내용은 [Jetpack Compose 공식 문서]([유효하지 않은 URL 삭제됨] 참조하십시오.

추가 예시:

• 여러 ViewModel 클래스를 사용하는 방법
• ViewModel에서 저장소와 통신하는 방법
• ViewModel에서 액션 및 이벤트 처리하는 방법

**도

추가 질문

fun GreetingScreen(viewModel: MyViewModel) { var message by remember { mutableStateOf(viewModel.message.value) } 

여기서 viewModel은 변수야?

맞습니다. 코드 예시에서 viewModel은 변수입니다.

좀 더 정확하게 설명하면 viewModel은 Jetpack Compose에서 ViewModel을 가져오는 함수를 통해 얻은 ViewModel 인스턴스를 저장하는 변수입니다.

코드를 살펴보면:

• viewModel 변수는 viewModel<MyViewModel>() 함수를 호출하여 MyViewModel 클래스의 인스턴스를 가져옵니다.
• 이 함수는 Jetpack Compose의 생명주기 인식 기능을 활용하여 해당 액티비티의 생명주기에 따라 ViewModel 인스턴스를 관리합니다.
• 즉, 액티비티가 만들어지면 ViewModel 인스턴스도 만들어지고, 액티비티가 파괴되면 ViewModel 인스턴스도 자동으로 해제됩니다.

따라서 viewModel 변수는 액티비티의 생명주기에 따라 유효한 MyViewModel 인스턴스를 참조하는 역할을 합니다.