안드로이드 개발에서 제트팩 컴포즈(Jetpack Compose)는 UI를 구축하는 현대적인 방식을 제공합니다. 특히 상태 관리는 컴포즈 애플리케이션에서 중요한 부분인데, 이를 효과적으로 관리하기 위해 ViewModel과 함께 collectAsState()를 사용하는 방법을 알아보겠습니다.
📌 collectAsState()
collectAsState()는 Jetpack Compose에서 Flow(또는 StateFlow)를 쉽게 구독하고, 구독 결과를 Compose의 State로 변환해주는 확장 함수입니다. 이 함수를 사용하면 Flow가 새 값을 emit할 때마다 UI가 자동으로 재컴포지션되어 최신 상태를 표시해줍니다.
왜 사용 하는 가?
- Kotlin Coroutines의 Flow는 비동기 데이터를 스트리밍 방식으로 전달합니다.
- 하지만 Compose에서는 상태(
State) 변화를 관찰해 UI를 업데이트합니다. collectAsState()를 사용하면Flow를 직접launch해서collect할 필요 없이, 자동으로Flow를 구독하며 현재 값을 Compose 상태로 변환해 줍니다.
📌 ViewModel과 Flow
ViewModel에서 상태를 Flow로 노출하는 패턴
class MainViewModel : ViewModel() {
private val _uiState = MutableStateFlow(MyUiState())
val uiState: StateFlow<MyUiState> = _uiState.asStateFlow()
fun updateSomething(newValue: String) {
_uiState.update { currentState ->
currentState.copy(something = newValue)
}
}
}MutableStateFlow: 내부에서 변경 가능한 상태 정의StateFlow로: 외부에는 읽기 전용
collectAsState() 이해하기
@Composable
fun MainScreen(viewModel: MainViewModel = viewModel()) {
val uiState by viewModel.uiState.collectAsState()
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column {
Text(text = "Current value: ${uiState.something}")
Button(onClick = { viewModel.updateSomething("New Value") }) {
Text("Update Value")
}
if (uiState.isLoading) {
CircularProgressIndicator()
}
uiState.error?.let { error ->
Text(
text = error,
color = MaterialTheme.colorScheme.error
)
}
}
}
}uiState: Flow를 State로 변환- Compose가 자동으로 Flow 구독의 생명주기를 관리합니다.
- 컴포저블이 Composition에서 제거될 때 자동으로 Flow 구독이 취소됩니다.
이제 uiState는 State 타입으로,
viewModel.uiState의 값이 변경될 때마다 이 컴포저블이 재구성됩니다
📌 collectAsState 없이 방식 비교
@Composable
fun MainScreen(viewModel: MainViewModel = viewModel()) {
var uiState by remember { mutableStateOf(MyUiState()) }
LaunchedEffect(viewModel) {
viewModel.uiState.collect { newState ->
uiState = newState
}
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column {
Text(text = "Current value: ${uiState.something}")
Button(onClick = { viewModel.updateSomething("New Value") }) {
Text("Update Value")
}
if (uiState.isLoading) {
CircularProgressIndicator()
}
uiState.error?.let { error ->
Text(
text = error,
color = MaterialTheme.colorScheme.error
)
}
}
}
}- LaunchedEffect를 사용하여 수동으로 코루틴의 생명주기를 관리해야 합니다.
- 잘못 구현하면 메모리 누수가 발생할 수 있습니다.
📌 여러 Flow 처리
collectAsState 사용:
val state1 by flow1.collectAsState()
val state2 by flow2.collectAsState()
val state3 by flow3.collectAsState()collectAsState 없이 방식:
var state1 by remember { mutableStateOf(initialValue1) }
var state2 by remember { mutableStateOf(initialValue2) }
var state3 by remember { mutableStateOf(initialValue3) }
LaunchedEffect(Unit) {
launch { flow1.collect { state1 = it } }
launch { flow2.collect { state2 = it } }
launch { flow3.collect { state3 = it } }
}- 여러 Flow를 처리할 때 collectAsState()를 사용하면 각 Flow를 독립적으로 관리할 수 있어 코드가 더 명확해집니다.
📌 초기값 처리
collectAsState 사용:
val state by flow.collectAsState(initial = initialValue)collectAsState 없이 방식:
var state by remember { mutableStateOf(initialValue) }
LaunchedEffect(Unit) {
flow.collect { state = it }
}- collectAsState()는 Flow에서 첫 번째 값이 수집되기 전에 표시할 초기값을 직접 지정할 수 있습니다.
📌 에러 처리
collectAsState 사용:
- 에러 처리가 내부적으로 이루어지므로 추가 코드가 필요하지 않습니다.
collectAsState 없이 방식:
LaunchedEffect(Unit) {
try {
flow.collect { state = it }
} catch (e: Exception) {
// error
}
}- Flow 수집 중 발생하는 예외를 직접 처리해야 합니다.
📌 마무리
성능 비교
메모리 사용: 두 방식 모두 비슷한 메모리 사용량을 보이지만 collectAsState()는 내부적으로 최적화되어 있어 약간 더 효율적일 수 있습니다.
재구성 효율성: collectAsState()는 Compose의 상태 시스템과 긴밀하게 통합되어 변경된 부분만 효율적으로 재구성합니다.
개발자 효율성: collectAsState()를 사용하면 개발자는 보일러플레이트 코드를 줄이고 핵심 비즈니스 로직에 집중할 수 있습니다.
사용 시나리오 비교
collectAsState가 더 적합한 경우:
- 간단한 UI 상태 관찰
- 여러 독립적인 Flow를 관찰할 때
- 표준적인 패턴을 따르는 앱에서
- 코드의 간결성과 가독성이 중요할 때
collectAsState 쓰지 않는 방식이 더 적합한 경우:
- 복잡한 Flow 변환이나 결합이 필요할 때
- 특별한 에러 처리가 필요한 경우
- Flow 수집에 대한 세밀한 제어가 필요할 때
- 특정 코루틴 컨텍스트에서 Flow를 수집해야 할 때 (물론
collectAsState(context = ...)로도 가능합니다)
결론
collectAsState()는 제트팩 컴포즈에서 Flow를 관찰하는 가장 간결하고 효율적인 방법입니다. 기존의 방식과 비교했을 때 코드가 더 간결해지고 생명주기 관리가 자동으로 이루어지며 여러 Flow를 쉽게 처리할 수 있다는 장점이 있습니다.
그러나 특별한 요구사항이 있는 경우 전통적인 방식을 사용하여 Flow 수집에 대한 더 세밀한 제어가 가능합니다. 각 방식의 장단점을 이해하고 상황에 맞게 선택하는 것이 중요 한 것 같습니다.
