[Android/Compose] collectAsState()를 활용한 상태 관리

 

Jetpack Compose에서 Flow 또는 StateFlow를 UI에서 구독할 때, 상태를 효율적으로 관리하는 것이 중요합니다.
이때 collectAsState()를 사용하면 Flow를 State로 변환하여 UI가 자동으로 최신 상태를 반영할 수 있습니다.

이번 글에서는 collectAsState()가 무엇이며, 어떻게 사용해야 하는지 공부 한 내용을 정리하겠습니다.

---

1. collectAsState()란?

collectAsState()는 Jetpack Compose에서 Flow나 StateFlow를 구독하여 State<T>로 변환하는 함수입니다.
이 함수를 사용하면 Composable 내부에서 Flow를 안전하게 수집(collect)할 수 있으며, 값이 변경될 때 자동으로 UI가 갱신됩니다.

또한, State로 변환되기 때문에 Compose의 Recomposition과 자연스럽게 연동되며, UI 상태를 쉽게 관리할 수 있습니다.

val uiState = viewModel.uiState.collectAsState()

 

• Flow 데이터를 State<T>로 변환하여 UI에서 쉽게 사용할 수 있도록 함
• Flow의 값이 변경될 때마다 UI가 자동으로 업데이트됨 (Recomposition 발생)

---

2. collectAsState()의 사용법

1) ViewModel에서 StateFlow를 제공하고 UI에서 collectAsState()로 구독

ViewModel에서는 StateFlow를 활용하여 상태를 관리하고, UI에서는 이를 collectAsState()를 사용하여 구독할 수 있습니다.

class MyViewModel : ViewModel() {
    private val _uiState = MutableStateFlow("초기 데이터") // Flow 데이터 생성
    val uiState: StateFlow<String> = _uiState.asStateFlow() // StateFlow로 변환
}

 

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()

    Text(text = uiState) // Flow의 값이 변경될 때마다 자동으로 UI 업데이트
}

 

설명

• ViewModel에서 StateFlow를 사용하여 상태를 관리합니다.
• UI에서는 collectAsState()를 사용하여 자동으로 상태를 감지하고 업데이트합니다.
• by 키워드를 사용하면 State<String> 대신 String 값을 직접 사용할 수 있습니다.

---

2) Flow를 collectAsState() 없이 직접 수집하는 경우

Compose에서는 collectAsState() 없이도 Flow를 구독할 수 있습니다.
하지만 이 경우 LaunchedEffect를 사용하여 직접 collect()를 호출해야 합니다.

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState = remember { mutableStateOf("초기 값") }

    LaunchedEffect(Unit) {
        viewModel.uiState.collect { value ->
            uiState.value = value
        }
    }

    Text(text = uiState.value)
}

 

비교

• collectAsState()를 사용하면 Flow의 값을 State로 변환하여 UI 업데이트를 자동화할 수 있습니다.
• LaunchedEffect를 사용하면 직접 collect()를 호출해야 하지만, 좀 더 세밀한 흐름 제어가 가능합니다.
• collectAsState()를 사용하는 것이 코드가 간결하며, Compose의 상태 관리 방식과 잘 맞습니다.

---

3. collectAsState()의 장점

1. UI 상태를 자동으로 업데이트
   •    Flow의 데이터가 변경되면 Recomposition이 자동으로 발생하여 UI를 갱신할 수 있습니다.
2. Compose의 상태(State)와 잘 통합됨
   •    StateFlow 또는 Flow를 State<T>로 변환하여 UI에서 쉽게 사용할 수 있습니다.
3. Coroutine Scope를 자동으로 관리
   •    ViewModel에서 제공하는 StateFlow를 구독할 때 UI가 Unsubscribe하는 타이밍을 자동으로 관리합니다.
4. 메모리 누수 방지
   •    Compose의 Lifecycle이 Flow를 자동으로 수집하고 중지하기 때문에 ViewModel이 살아있는 동안만 데이터가 업데이트됩니다.

---

결론

• collectAsState()는 Jetpack Compose에서 Flow를 State<T>로 변환하여 UI 상태를 반영하는 기능입니다.
• ViewModel에서 StateFlow를 제공하고, UI에서 collectAsState()를 사용하면 자동으로 UI가 업데이트됩니다.
• Compose에서는 기존의 LiveData.observe() 대신 collectAsState()를 사용하는 것이 권장됩니다.

이 기능을 활용하면 Compose 환경에서 Flow를 쉽게 구독하고 상태를 관리할 수 있으므로, 효율적인 UI 업데이트를 구현할 수 있습니다.