📱코틀린 플로 정리

💠 코틀린 플로

플로란?

• 비동기 데이터 스트림을 처리하기 위한 도구
• 시간에 따라 여러 개의 데이터를 순차적으로 처리 가능
• LiveData처럼 UI와 연동도 가능하면서도 더 다양한 기능과 연산 제공
• 기본적으로 콜드 스트림=> 구독하기 전까지는 아무 작업도 x
  
  

ViewModel에 Flow 선언하기

• ViewModel에서 Flow를 선언할 때는 보통 flow {} 블록 사용
• 블록 안에서는 emit() 함수를 이용해 데이터를 하나씩 방출

val numberFlow = flow {
    for (i in 1..5) {
        emit(i)
        delay(1000)
    }
}

-> 데이터를 하나씩, 일정한 간격으로 내보내는 구조 가능
-> 비동기 루프처럼 작동

Compose에서 Flow 수집하기

• Flow를 상태로 바꿔 UI와 연결해주는 collectAsState()를 사용
• Flow에서 나오는 값을 실시간으로 받아 상태로 저장하고, 이 상태가 바뀌면 자동으로 UI를 다시 그려줌

=> 비동기 데이터를 쉽게 UI와 연결할 수 있게 해주는 도구

val number by viewModel.numberFlow.collectAsState(initial = 0)

Flow 중간 연산자 사용하기

• Flow는 단순한 데이터 흐름만 제공하는 것이 아니라, 데이터를 가공하고 제어하는 다양한 중간 연산자 제공
  ex) map은 데이터를 변환하고, filter는 조건에 맞는 데이터만 통과

val newFlow = numberFlow
    .filter { it % 2 == 0 }
    .map { it * 10 }

=> Flow는 체이닝 방식으로 데이터 흐름을 구성 가능
=> 복잡한 로직도 간결하게 표현 가능

버퍼 사용하기

• buffer()를 사용해서 생산자가 빠르더라도 데이터를 잠시 저장해두고, 소비자가 따라잡을 수 있게 함

numberFlow
    .buffer()
    .collect { ... }

=> 실제 앱에서 네트워크 속도, 사용자 입력 속도 차이 등을 처리할 때 유용

종단 연산자

• Flow는 마지막에 반드시 종단 연산자가 있어야 실행
• 대표적인 것: collect()

=> flow로 정의만 해놓고 collect()를 하지 않으면 아무 일도x

numberFlow.collect { value ->
    Log.d("TAG", "값: $value")
}

• first(), toList() 같은 다양한 종단 연산자가 있으며, 상황에 따라 적절하게 사용
  
  

Flow 평탄화

• 이중 구조를 평탄하게 만들어주는 것 : flatMap 계열 함수

• flatMapConcat: 순차적으로 연결

• flatMapMerge: 병렬로 연결

• flatMapLatest: 가장 마지막 것만 유지

ex) 검색어 자동완성 같은 기능에서는 사용자가 입력을 바꿀 때마다 새로운 API 호출이 필요=> flatMapLatest를 주로 사용

핫 플로와 콜드 플로의 차이

• Flow는 기본적으로 콜드
  => 구독자가 collect할 때마다 새롭게 실행
• StateFlow와 SharedFlow는 핫 플로
  => 한 번 방출된 데이터를 계속해서 여러 구독자에게 전달 가능
• 핫 플로는 이미 실행 중인 상태를 공유해야 할 때 사용
  ex) 로그인 상태, 버튼 클릭 이벤트 등
  
  

콜드 Flow를 핫 Flow로 전환하기

• shareIn() 또는 stateIn() 같은 연산자를 사용하면 기존의 콜드 Flow를 핫 Flow로 전환 가능
  => Flow를 한 번만 실행하고 여러 구독자가 값을 공유 가능

val hotFlow = coldFlow.shareIn(scope, SharingStarted.Eagerly)

💠 SharedFlow

SharedFlow란?

• 일회성 이벤트를 여러 구독자에게 전달할 수 있는 핫 플로
• 토스트 메시지, 네비게이션 이동, 다이얼로그 표시처럼 UI 이벤트에 적합
• StateFlow와는 달리 값을 기억하지 않고, emit() 하면 구독 중인 컴포넌트만 데이터를 받음
  
  

SharedFlowDemo 프로젝트 구성

1. ViewModel에 MutableSharedFlow를 선언

2. 버튼 클릭 등으로 emit() 실행

3. Composable에서는 LaunchedEffect로 수집

=> 이벤트성 데이터를 UI와 연결할 때 직관적

Compose에서 SharedFlow 수집

• Compose에서 SharedFlow를 수집할 땐 LaunchedEffect(Unit) 블록 사용
• 컴포넌트가 처음 나타날 때 한 번 실행되고, 내부에서 collect()를 통해 이벤트를 감지
• 버튼 클릭 시 이벤트 발생 → Toast 표시 같은 로직이 자연스럽게 구현

• Flow는 순차적 데이터 흐름을 위한 코루틴 기반 도구
• collectAsState로 Compose와 연동 가능
• map, filter, buffer, combine, flatMapLatest 등 다양한 연산자 제공
• SharedFlow는 일회성 UI 이벤트 처리에 최적
• Compose에서는 LaunchedEffect로 SharedFlow 수집