[kotlin] Jetpack Compose에서 앱 로딩 및 초기화 처리하기

11 Dec 2023

kotlin

이번에는 Jetpack Compose에서 앱을 초기화하고 데이터를 가져오는 동안 로딩 상태를 관리하는 방법에 대해 알아보겠습니다.

1. 로딩 상태 관리하기

Jetpack Compose에서는 mutableStateOf를 사용하여 로딩 상태를 관리할 수 있습니다.

import androidx.compose.runtime.mutableStateOf

val isLoading = mutableStateOf(false)

로딩 상태가 발생할 때 isLoading 값을 true로 변경하고, 작업이 완료되면 다시 false로 변경합니다.

2. 앱 초기화 처리하기

앱이 시작될 때 필요한 데이터를 가져오거나 초기화를 수행해야 할 때는 LaunchedEffect를 사용할 수 있습니다.

import androidx.compose.runtime.LaunchedEffect
import kotlinx.coroutines.delay

LaunchedEffect(Unit) {
    isLoading.value = true
    // 데이터 가져오기 또는 초기화 작업 수행
    delay(2000) // 예시로 2초 후에 완료되었다고 가정
    isLoading.value = false
}

3. 로딩 상태 표시하기

로딩 중일 때 사용자에게 진행 상태를 알려주기 위해 CircularProgressIndicator나 사용자 정의 로딩 화면을 표시할 수 있습니다.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

@Composable
fun LoadingScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

LoadingScreen은 isLoading 값에 따라 로딩 중인지 여부를 확인하여 화면에 표시될 수 있습니다.

마무리

Jetpack Compose를 사용하여 앱의 초기화 및 로딩 상태를 처리하는 간단한 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시키고 데이터 처리 과정을 효과적으로 관리할 수 있습니다.

참고 자료: Jetpack Compose 문서