[Mission] 뇽 week8 나이키앱 Lazy 레이아웃

[chrry03]

📌 PR 제목

8주차 미션 제출

✅ 변경 사항

이번 PR에서 변경된 내용을 간략히 정리해주세요.

• 기존에 만들었던 RecyclerView + Adapter 코드를 LazyColumn으로 교체하기
• items() 함수를 사용하여 동일한 리스트 데이터 표시
• 아이템 레이아웃을 Composable 함수로 새로 작성
• 각 아이템에 고유한 key를 지정하여 상태 안정성 확보

📷 영상 및 스크린샷

작업 내용을 스크린샷 또는 영상 형태로 올려주세요.

week8.mp4

🔗 알게 된 사항

워크북과 과제를 하며 알게 된 점을 작성해주세요
items()를 사용해 같은 데이터 리스트를 반복해서 보여주고, key를 통해 각 아이템을 구분하는 방식을 배웟다
스크롤 방향이나 아이템 간격 패딩을 조절하며 컴포즈의 리스트 배치 방식이 xml과 다르다는걸 느꼇다

📝 질문 사항

워크북과 과제를 하며 궁금했던 점을 작성해주세요

[hw4nx02]

8주차 피드백

안녕하세요, 뇽🍒! 서서히 종강이 다가오는 게 느껴집니다... 조금 더 파이팅해봅시다!!

총평

이번 주에는 Compose에서의 리스트 구현에 대해 학습했는데요. 이는 성능과 안정성에 직접적인 영향을 미치는 요소입니다. 때문에 불필요한 Recomposition을 방지하고, 스크롤 가능한 컴포넌트의 올바른 사용에 대한 고민이 항상 필요한 지점이라고 볼 수 있겠습니다!
기존 XML 기반의 RecyclerView 구현을 Jetpack Compose의 Lazy 레이아웃으로 잘 전환하셨습니다. 특히, 아이템 키 지정과 같은 모범 사례를 잘 따르는 것이 인상적이네요! 추가적으로 지난 번 피드백과 같이 구조를 정리하는 방안도 고려해보시면 좋을 것 같습니다.

리뷰

Good!

1. 적절한 Lazy 컴포저블 선택

HomeScreen Composable 내에서 수평 스크롤이 필요한 섹션에 LazyRow를, 그리드 형태의 수직 스크롤이 필요한 섹션에 LazyVerticalGrid를 사용하셨는데요, 각 섹션의 레이아웃 특성에 맞춰 LazyRow와 LazyVerticalGrid를 적절하게 선택하여 사용해주신 것 같습니다.

2. 고유한 아이템 Key 지정

items(productList, key = { it.id }) 코드에서 각 ProductItem의 고유한 id를 key로 지정하셨습니다. 이는 리스트 아이템의 추가, 삭제, 재정렬 시 Compose가 각 아이템의 상태를 안정적으로 유지하고 불필요한 Recomposition을 최소화하는 데 크게 기여합니다. position(index)를 키로 사용하는 것보다 훨씬 권장되는 방식입니다.

3. 아이템 내부 상태 관리

ProductCard Composable 내에서 '좋아요' 상태를 val isLiked = remember { mutableStateOf(product.isLiked) }와 같이 로컬 상태로 관리하고 있습니다. 각 ProductCard 내부에서 '좋아요' 상태를 remember를 사용하여 로컬로 관리함으로써, 해당 아이템의 상태 변경이 전체 리스트의 불필요한 Recomposition을 유발하지 않도록 효율적으로 처리된 것 같습니다.

---

To Improve

1. 불필요한 Recomposition 방지: Modifier 안정성

LazyRow와 LazyVerticalGrid의 contentPadding에 PaddingValues(horizontal = 20.dp)와 PaddingValues(horizontal = 16.dp, vertical = 8.dp)를 직접 전달하고 있는 것을 볼 수 있습니다. 현재 코드에서는 PaddingValues 객체가 Composable 함수가 Recomposition될 때마다 새로 생성될 수 있습니다. 이는 contentPadding Modifier가 불안정한(unstable) 객체로 인식되어 불필요한 Recomposition을 유발할 가능성이 있습니다. 때문에, remember를 사용하여 PaddingValues 객체를 기억시키는 것을 고려해볼 수 있습니다.

예: contentPadding = remember { PaddingValues(horizontal = 20.dp) }