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
인스턴스를 참조하는 역할을 합니다.
'Jetpack Compose-Kotlin' 카테고리의 다른 글
09. Kotlin-Modifier (0) | 2024.05.11 |
---|---|
08. Kotlin-변수, 매개변수, 인수, 인스턴스, 클래스 (0) | 2024.05.11 |
06. Kotlin-MutableState (0) | 2024.05.11 |
05. Kotlin-Remember (0) | 2024.05.11 |
04. Kotlin-컬랙션 (0) | 2024.05.11 |