예제 정리 : 이미지 리스트 구현

1. 목표

• 이미지 리스트 구현하기
• 리사이클러뷰 사용하기
• Paging 3 라이브러리에 이해하고, 사용하기

아래 링크에서 부터 이어서 구현하였습니다.

이미지 화면 구현

원본은 아래와 같습니다.

Paging 3.0 + MVVM + Flow를 이용하여 리스트 구현하기

2. 사용 기술

• MVVM 아키텍쳐
• Koin
• Retrofit + Okhttp
• Gson
• Glide
• Paging3

3. 제작 구조

단순히 이해하기 위해 따라 만든 것이라 따로 구분하지는 않았다.

4. 코드구성

4-1. Paging3 원리

앱에서 대량의 데이터를 페이징 처리하여 리스트나 그리드 형태로 화면에 보여줄 수 있게 해주는 라이브러리이다.

PagingSource를 이용하여 데이터를 가져오고, PagingData로 데이터를 노출한다. PagingAdapter를 사용하여 데이터를 화면에 표시할 수 있으며, 이를 통해 전체 데이터를 로드하지 않고 페이지 단위로 로딩하므로 앱의 성능이 향상된다.

페이징 라이브러리가 앱 아키텍처에서 어떻게 적용되는지 보여주는 예

페이징 라이브러리는 앱의 세가지 레이어에서 작동한다.

• 저장소 레이어 : 기본 구성요소는 PaingSource로 데이터 소스와 이 소스에서 데이터를 검색하는 방법을 정의한다. PagingSource 객체는 네트워크 소스 및 로컬 데이터베이스를 포함한 단일 소스에서 데이터를 로드할 수 있다.
• ViewModel 레이어 : PagingData를 LiveData나 Flow로 노출하는 작업을 맡았다. PagingData를 제공하고 PagingSource에서 데이터를 가져온다. 또한 PaingData를 노출하여 UI 컨트롤러에서 데이터를 화면에 표시할 수 있다.
• UI 레이어 : PaigingDataAdapter로 RecyclerView 어댑터로 제작한다.

4-2. 업데이트된 코드

자세한 구성 과정은 위의 원본 링크에서 확인하길 바란다.

페이징을 이해하기 위한 약간의 코드와 설명은 아래와 같다.

override fun afterOnCreate() {
    super.afterOnCreate()
    lifecycleScope.launchWhenStarted {
        viewModel.fetchImageList().collect {
            imageListAdapter.submitData(it)
        }
    }
}

1. fetchImageList() 메서드가 PagingData 객체를 반환한다.
2. PagingData 객체는 Flow로 감싸져 있다.
3. collect 메서드는 Flow 객체에서 PagingData 객체를 가져와 imageListAdapter에 전달한다.
4. PagingDataApdater은 RecyclerView의 어댑터이고, submitData 메서드는 RecyclerView를 업데이트한다.
5. RecyclerView는 LayoutManager를 통해 화면에 표시되고, 화면에 보이는 아이템만 렌더링한다.

정리하자면 fetchImageList를 호출하면 페이징 라이브러리가 PagingData 객체를 생성하고, 이를 Flow로 감싸서 반환한다. 그리고 collect 메서드를 사용하여, PagingData를 가져와 PagingDataAdapter에 전달한다. RecyclerView는 LayoutManager을 통해 화면에 아이템을 표시하고, 이를 렌더링하여 사용자에게 보여준다. 이 과정에서 PagingData 객체에 대한 요청과 응답이 이루어지며, 데이터가 효율적으로 로딩된다.

오류가 있을 수도 있다. 그냥 단순하게 구조를 보고 생각해낸 것이라서.

제작한 깃허브 링크는 아래와 같다.

GitHub - geonunggoodboy/ExAndroid: 안드로이드 외장 하드에 저장된 연습 파일들

결과는 아래와 같다.