📱코루틴과 리스트

💠코루틴과 LaunchedEffect

코루틴이란?

• Kotlin에서 제공하는 비동기 처리를 위한 도구로, 전통적인 스레드 방식보다 훨씬 가볍고 효율적으로 동시 작업 수행 가능
• UI 스레드를 차단하지 않고 네트워크 요청, 파일 입출력 등 시간이 오래 걸리는 작업을 수행 가능
  
  

주요 구성 요소

• CoroutineScope: 코루틴이 실행되는 범위, 생명주기 관리에 중요

• 일시 중단 함수: 중단 가능한 함수 -> delay(), withContext() 등이 있음

• 디스패처 : 코루틴이 실행될 스레드를 정의 (Main, IO, Default 등)

• 코루틴 빌더: launch, async, withContext 등이 있으며 코루틴을 생성할 때 사용
  
  

Compose에서 코루틴 사용하기

• LaunchedEffect를 통해 컴포저블 안에서 코루틴 실행 가능
• 사용자 인터랙션에 반응하거나, 초기 데이터를 로드하는 데 자주 사용

@Composable
fun CoroutineExample() {
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            delay(1000)
            println("1초 후 실행됨")
        }
    }) {
        Text("실행")
    }
}

=>LaunchedEffect는 컴포저블이 처음 컴포즈될 때 특정 작업을 자동으로 실행하고 싶을 때 사용

코루틴 중지 및 재시작

• delay()를 통해 일시 중단될 수 있으며, 재시작은 호출 컨텍스트에 의해 자동으로 처리
• Job.cancel()을 통해 코루틴을 명시적으로 종료할 수도 있어 상황에 맞게 자원을 관리 가능
  
  

코루틴 채널 커뮤니케이션

• 코루틴 간 데이터를 전달하기 위해 Channel이나 Flow, SharedFlow, StateFlow를 사용
• Channel은 하나의 코루틴이 데이터를 보내고 다른 코루틴이 받을 수 있게 해주는 일종의 파이프 역할

val channel = Channel<Int>()
scope.launch {
    channel.send(1)
}
scope.launch {
    val received = channel.receive()
    println(received)
}

💠리스트와 그리드

• Compose에서는 리스트나 그리드 UI를 구성할 때 성능과 메모리를 고려하여 Lazy 컴포저블을 활용
• Lazy 컴포저블은 보이는 항목만 렌더링하여 스크롤이 많은 UI에서도 뛰어난 성능을 제공

LazyColumn 기본 구조

• Jetpack Compose의 대표적인 세로 리스트로, RecyclerView의 대체

LazyColumn {
    items(list) { item ->
        Text(text = item.name)
    }
}

LazyRow & LazyVerticalGrid

• LazyRow: 가로 스크롤이 가능한 리스트

• LazyVerticalGrid: 격자형 레이아웃으로 상품 리스트, 갤러리 등에 적합

LazyRow {
    items(items) { item ->
        Card(Modifier.padding(8.dp)) {
            Text(item.title)
        }
    }
}

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(items) { item ->
        GridItem(item)
    }
}

스크롤 상태 감지

• rememberLazyListState()를 사용하면 스크롤 위치를 추적하고 특정 위치로 이동 가능
• ex) 특정 버튼 클릭 시 리스트를 맨 위로 스크롤 가능

val listState = rememberLazyListState()
LazyColumn(state = listState) { ... }

LaunchedEffect(Unit) {
    listState.animateScrollToItem(10)
}

스티키 헤더 구현

• 섹션 단위로 리스트를 구분하고 현재 섹션이 상단에 고정되도록 해주는 UI 기법

LazyColumn {
    stickyHeader {
        Text("헤더", modifier = Modifier.background(Color.LightGray))
    }
    items(list) {
        Text(it.title)
    }
}

스크롤 위치에 반응하기

• 스크롤이 특정 위치를 넘어갔는지 여부에 따라 UI를 제어 가능

val isScrolled = remember {
    derivedStateOf {
        listState.firstVisibleItemIndex > 2
    }
}

💠Row/Column 리스트 튜토리얼

listdemo 프로젝트 만들기

• 새로운 Compose 프로젝트 생성
• Column 기반 리스트 구성으로 기본적인 리스트 표현 연습

Column 기반 리스트 만들기

val items = listOf("첫 번째", "두 번째", "세 번째")
Column {
    items.forEach {
        Text(it, modifier = Modifier.padding(8.dp))
    }
}

수동 스크롤 리스트 만들기

• verticalScroll()을 사용하면 Lazy 없이도 스크롤 가능한 UI를 만들 수 있다.

val scrollState = rememberScrollState()
Column(modifier = Modifier.verticalScroll(scrollState)) {
    for (i in 1..50) {
        Text("아이템 $i", modifier = Modifier.padding(8.dp))
    }
}

💠Lazy 리스트 튜토리얼

lazylistdemo 프로젝트 만들기

• assets/data.xml에 샘플 데이터를 추가하고 파싱

• 모델 클래스 생성: data class Item(val name: String, val imageUrl: String)
  
  

이미지 로딩 처리하기

• Coil 라이브러리를 활용한 이미지 로딩

리스트 아이템 컴포저블 디자인

@Composable
fun ItemCell(item: Item) {
    Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Image(...)
        Column(modifier = Modifier.padding(start = 8.dp)) {
            Text(item.name, fontWeight = FontWeight.Bold)
        }
    }
}

Lazy 리스트 구현

LazyColumn {
    items(items) { item ->
        ItemCell(item)
    }
}

리스트 테스트 및 클릭 처리

ItemCell(item = item, onClick = { navigateToDetail(item) })

💠스티키 헤더 & 스크롤 제어

• 사용자 친화적인 리스트를 만들기 위해서는 섹션 구분, 헤더 고정, 스크롤 위치 이동 등의 기능이 필요

리스트 데이터 그룹핑 & 헤더 표시

• 리스트 데이터를 그룹핑하고 각 그룹에 스티키 헤더를 추가

val grouped = items.groupBy { it.category }
LazyColumn {
    grouped.forEach { (category, itemList) ->
        stickyHeader {
            Text(text = category, modifier = Modifier.background(Color.Gray).padding(8.dp))
        }
        items(itemList) {
            ItemCell(it)
        }
    }
}

스크롤 버튼 추가

val scope = rememberCoroutineScope()
val listState = rememberLazyListState()

Button(onClick = {
    scope.launch {
        listState.animateScrollToItem(0)
    }
}) {
    Text("맨 위로")
}