Jetpack Compose로 무한 스크롤 구현하기

                                    🤵
1. 재사용 가능한 컴포넌트 형태로 만들 것
2. 양방향으로 스크롤링이 가능할 것
3. 현재 보이는 화면 끝으로 이동하면 api를 호출할 것

                                    LazyColumn(
    state: rememberLazyListState(), // 스크롤을 할거면 필수이다.
) {
    items(List<T>) // 다중 item에 대한 scroll 정보를 state에서 추적한다.
}

                                    @Composable
fun InfiniteTimelineScrollBox(
    modifier: Modifier = Modifier,
    items: List<@Composable () -> Unit>? = null,
    loadMore: () -> Unit
) {
    val lazyListState = rememberLazyListState()
    var tests = remember { MutableList(20) { "Item #${it + 1}" } }

    Column(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            state = lazyListState, // lazyListState...
            modifier = Modifier.fillMaxSize()
        ) {
            items(tests.size, key = {index -> index}) { index ->
                ListItemView(item = tests[index])
            }
        }
    }
}

                                    @Composable
fun InfiniteTimelineScrollBox(
    modifier: Modifier = Modifier,
    items: List<@Composable () -> Unit>? = null,
    loadMore: () -> Unit
) {
    val lazyListState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    var tests = remember { MutableList(40) { "Item #${it + 1}" } }

    Column(modifier = Modifier.fillMaxSize()) {
        // 너무 상단이면 클릭이 안됨
        Spacer(modifier = Modifier.height(25.dp))

        // 버튼 추가 - 특정 위치로 스크롤 이동
        Button(
            onClick = {
                coroutineScope.launch {
                    // 10번째 아이템으로 스크롤
                    lazyListState.animateScrollToItem(index = 10)
                }
            },
            modifier = Modifier.padding(8.dp)
        ) {
            Text("Scroll to Item 10")
        }

        Button(
            onClick = {
                tests = tests.toMutableList().apply { set(12, "Updated Item #13") }
            },
            modifier = Modifier.padding(8.dp)
        ) {
            Text("update Item 12")
        }

        LazyColumn(
            state = lazyListState, // lazyListState...
            modifier = Modifier.fillMaxSize()
        ) {
            items(tests.size, key = {index -> index}) { index ->
                ListItemView(item = tests[index])
            }
        }
    }
}

                                    val reachedBottom: Boolean by remember {
        derivedStateOf {
            val lastVisibleItem = lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()
            lastVisibleItem?.index != 0 && lastVisibleItem?.index ==
                    lazyListState.layoutInfo.totalItemsCount - 1 // 전체 수 - 1: last idx
        }
    }

                                    LaunchedEffect(reachedBottom) {
        Log.i("scroll", "LaunchedEffect starts!\nreachedBottom: ${reachedBottom}")
        Log.i("scroll", "test : ${tests}")
        if (reachedBottom) {
            tests = tests.apply {
                addAll((tests.size until tests.size + 10).map { "Item #${it + 1}" })
            }
            Log.i("scroll", "added test : ${tests}")
        }
    }