[TIL-230612] 데이터 출력을 위한 List 구현

안녕하세요

TIL이라고해서 하루하루 작성하려고는 하는데, 개발 공부하는데 집중하다보니,

글쓰는 시간 내기가 애매해지네요. 꾸준히라도 작성해야 겠습니다 ^^

오늘은 Jetpack Compose로 List 형태의 데이터 출력을 구현해보려고 합니다.

출처 : https://community.algostudio.net/bikin-list-di-jetpack-compose/

---

IistItem 구성

List 구성 전 List의 각각 데이터가 어떻게 출력될지 구성합니다.

Column(modifier.weight(2.0f)) {
            Text(
                text = shopData.shopName,
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
            Text(
                text = shopData.address,
                fontSize = 14.sp
            )
        }

 

임시로 생성해놓은 Shop 데이터를 출력하고, 상단에 이름, 하단에 주소를 나오게 출력합니다.

List 구성

출력될 각각의 Item을 구성 후 List로 출력합니다.

Box(){
        LazyColumn(modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .scrollable(scrollState, Orientation.Vertical)){
            items(shopList){
                    shopData ->
                ShopItem(shopData = shopData)
            }
        }
    }

 List를 출력할 때는 LazyColumn을 사용합니다. 추가로 shopList는 임시로 만들어놓은 데이터입니다.

* LazyColumn을 사용하는 이유는 예상치 못하게 많은 데이터가 출력되었을 때, 데이터가 을 위해

스크롤할 때만 데이터를 Lazy하게 로딩 하여 앱 성능의 효율을 갖게하기 위해서 입니다.

* 자세한 사항은 다음 포스팅 LazyColum을 작성하겠습니다.

 

예제 결과

이번에는 Jetpack Compose를 이용한 List를 구현해보았습니다.

잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요!