Compose를 제대로 이해하지 못하고 Compose를 사용해 이슈가 발생했다...
(정말 죄송합니다....)
너무나도 당연한 것을 잘못 적어한 실수여서 블로그에 작성하는 거 자체가 부끄러운 일이지만 공개적으로 적어 이런일이 다시는 안생기도록 꼼꼼하게 코딩하는 자세를 가지겠습니다.
실수한 부분은 LazyColumn 부분입니다.
LazyColumn 내부에서 List를 Items안에 넣고 람다로 데이터를 넣어주면 되는 것을 forEach를 한번 더 돌려버린 것입니다. 배포 전 여러 테스트를 하는 과정에서는 정상적으로 출력되었던 UI가 전국에서 한 곳에서 반복되어서 출력되는 이슈가 반복되어 Jira가 저에게 날라온 것 입니다. 그 후 코드를 다시 살펴보던 중 이러한 문제를 찾았던 것입니다.
다른 동료들에게 이러한 이슈를 공유하였고 왜 특정 한 곳에서만 2번 UI가 출력이 된 것일까 하며 의견을 여쭤보았지만 다들 잘 모르는 문제였습니다. 당연하게 넣으면 안된다 정도만 알고있었습니다. 그렇기에 저는 LazyColumn과 forEach 등 사용된 기술들을 찾아보기 시작했습니다.
위의 문제를 파악하지 못하면 다른 코드를 작성할 때 신경이 쓰일 것 같았기 때문입니다. 그렇기 이유를 찾아냈습니다.
우선 LazyColumn에 대해서 먼저 알아보고 작성하겠습니다.
LazyColumn이란?
LazyColumn이란 Android Jetpack Compose에서 제공하는 선형 레이아웃 위젯 중 하나입니다. 이름 그대로 데이터가 Lazy하게 로딩되며, 스크롤하는 동안에만 해당 뷰의 데이터를 로딩하여 성능을 최적화 시키는 것 입니다.
특징은 다음과 같습니다.
- 대량의 아이템을 스크롤할 때 최적화된 형태로 작동합니다.
- 아이템이 로드될 때 UI가 차단되지 않습니다.
- 아이템을 스크롤하는 동안에만 로드되므로 리소스 사용량이 최소화됩니다.
특정 부분에서만 발생한 이유
LazyColumn은 화면에 표시할 수 있는 영역을 VisibleArea라고 부르며, 이 영역은 사용자가 스크롤을 하면서 이동합니다. VisibleArea 안에 있는 아이템만 렌더링되고, 화면에 표시되지 않는 아이템은 렌더링되지 않습니다.
그러나, LazyColumn의 높이가 매우 작거나 아이템의 높이가 매우 크다면 VisibleArea 안에 모든 아이템이 들어가지 않을 수 있습니다. 이 경우 LazyColumn은 VisibleArea 밖에 있는 아이템도 일부 렌더링될 수 있습니다.
이 때 중복된 출력이 발생하지 않는 이유는, VisibleArea 밖에 있는 아이템은 사용자에게 보이지 않기 때문입니다. 즉 해당 View의 출력 부분의 Modifier가 잘못설정 되었다는 뜻이며 해당 부분까지 같이 수정해 추후에 발견될 수 있는 이슈까지 제거하였습니다.
표면적으로는 한 가지의 실수가 UI를 중복 출력하는 줄 알았지만 자료를 더 찾아보니 해당 view 부분의 width가 잘못되어 있었다는 것을 알게되었습니다.
누군가는 그냥 지나처 갈 수 있는 부분을 확인해 본것은 굉장히 좋은 판단이였다고 생각하였으며 앞으로의 이슈 발생시 그냥 이슈 픽스만 하고 끝내는 것이 아닌 발생 이유와 해결 방법에 대해 자세히 기술하고 공유해야 할 것 같다라는 생각이 들었습니다.
읽어주셔서 감사합니다.
이러한 이슈는 다시 만들지 말자....
