UI를 구현하다 보면 Flow나 StateFlow로부터 값을 수집해서 화면에 상태를 반영해야 하는 경우가 많습니다. Jetpack Compose에서는 이를 위해 collectAsState()를 자주 사용합니다.
하지만 화면의 생명주기를 고려하지 않고 Flow를 수집하면, 화면이 보이지 않는 상태에서도 계속 값이 수집되거나 불필요한 연산이 발생할 수 있습니다.
이런 문제를 해결하기 위해 Compose에서는collectAsStateWithLifecycle 이라는 API를 제공합니다. 이번 글에서는 collectAsStateWithLifecycle이 무엇인지, 그리고 실제 UI 구현에서 왜 중요한지 정리해보려고 합니다.
🚀 CollectAsStateWithLifecycle?
CollectAsStateWithLifecycle은 Flow를 Lifecycle-aware하게 수집하도록 도와주는 함수입니다. 이 함수는 내부적으로 repeatOnLifecycle을 사용하여, Lifecycle이 STARTED 이상일 때만 Flow를 수집하고 화면이 STOPPED 상태가 되면 자동으로 수집을 중단합니다. 즉, UI가 실제로 보이고 있을 때만 상태를 수집하도록 보장해 줍니다.
class MainViewModel : ViewModel() {
private val _uiState = MutableStateFlow(UiState())
val uiState: StateFlow<UiState> = _uiState
}
@Composable
fun MainScreen(viewModel: MainViewModel) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
Text(text = uiState.title)
}ViewModel에서 StateFlow로 UI 상탤르 관리한다고 가정하면 위와 같이 코드를 작성할 수 있습니다. 이렇게 하면 화면이 보일 때만 상태를 수집하고 화면이 사라지면 자동으로 수집을 중단하며, 다시 돌아왔을 때 최신 상태를 안전하게 반영할 수 있습니다.
CollectAsStateWithLifecycle은 Compose UI에서는 사실상 표준이라고 봐도 됩니다.
🎯 마무리
collectAsStateWithLifecycle은 단순히 편의 함수가 아니라 UI 안정성과 성능을 동시에 챙길 수 있는 필수 도구입니다.
- collectAsState → 상태 수집은 되지만 lifecycle은 고려하지 않음
- collectAsStateWithLifecycle → 화면이 살아 있을 때만 안전하게 수집
Jetpack Compose가 상태 중심 UI인 만큼, 상태를 언제 수집할 것인가도 매우 중요한 요소입니다. Compose에서 Flow를 UI로 연결할 때는 습관처럼 collectAsStateWithLifecycle을 사용하는 것이 가장 안전한 선택이 될 것입니다.
