[Android] Jetpack Paging 3 라이브러리 사용하기

🧐 Paging Library

 페이징 라이브러리는 로컬 데이터베이스 또는 네트워크(Remote)의 데이터를 페이지 단위로 UI에 쉽게 표현할 수 있도록 도와주는 라이브러리다.

 

 라이브러리를 사용하지 않고 기존에 페이징을 구현하기 위해서는 RecyclerView와 같은 리스트 UI가 상단 또는 하단에 도달했는지 판단하는 코드를 작성하고, 다음 페이지를 로드(or Refresh)하는 코드를 또 작성해야만 했다.

 페이징이 필요한 모든 화면에 동일한 코드를 작성해야만 했고 네트워크 오류, 스크롤 감지 이상(?)과 같은 예외 처리 코드도 상당했다.

 

 위 문제점들을 포함한 여러 문제를 해결하기 위하여 Jetpack Paging Library가 출시되었다.

그리고 올해(2021년) 5월 Paging 3 라이브러리가 Stable 버전이 되었다.

 

---

🆚 Paging 2 vs Paging 3

 Paging 3 정식 출시로 Paging 2.x.x 기존 API 대부분을 지원 중단한 상태이다.

 무엇이 달라졌는지 간단하게만 살펴보자.

 

 - Coroutine, Flow, LiveData, RxJava를 위한 최고 수준의 지원을 제공한다.

 - 재시도(Retry)와 새로고침(Refresh) 기능을 포함하여 반응형 UI 디자인을 위해 LoadState와 Error Signal이 내장되었다.

 - Paging 2의 DataSource 서브 클래스를 모두 통합하여 심플한 데이터소스 인터페이스를 제공한다.

 - 취소 기능이 내장되었다.

 - List Separator, Loading Header, Footer가 내장되었다.

 - 데이터 캐싱이 가능하다.

 

---

🌿 Components

Paging Library Example in App Architecture (출처: Android Developer Paging3)

 Paging 3는 프로젝트의 적절한 관심사 분리를 요구하며 안드로이드 권장 아키텍처에 통합되도록 만들어졌다.

 Repository, ViewModel, UI 3가지 레이어에서 작동한다.

 

📌 Repository Layer

  📍 PagingData

 페이징된 데이터의 Container 역할을 한다. 데이터가 새로고침될 때마다 이에 상응하는 PagingData가 별도로 생성된다.

 

  📍 PagingSource

 로컬 데이터베이스 또는 네트워크로 데이터를 불러오는 것을 담당하는 추상 클래스이다.

데이터 소스를 정의하고 데이터를 가져오는 방법을 정의한다.

 

  📍 RemoteMediator

 네트워크(Remote)에서 불러온 데이터를 로컬 데이터베이스에 캐시(Cache)하여 불러오는 것을 담당한다.

오프라인 상태에서도 캐시된 데이터를 불러옴으로 유저 경험을 향상시켜줄 수 있다.

(현재 Experimental 상태로 향후 변경될 수 있다.)

 

📌 ViewModel Layer

  📍 Pager

 Repository Layer에서 구현된 PagingSource과 함께 PagingData 인스턴스를 구성하는 반응형 스트림을 생성한다.

PagingSource에서 데이터를 로드하는 방법, 옵션을 정의한 PagingConfig 클래스와 함께 사용된다.

 

📌 UI Layer

  📍 PagingDataAdapter

 PagingData를 RecyclerView에 바인딩하기 위해 사용된다.

데이터를 어느 시점에서 더 받아올 것인가 등 UI와 관련된 대부분의 일을 책임진다.

 

---

🔨 Implementation

📌 PagingSource 정의하기

 PagingSource를 만들기 위해서는 Paging Key인 데이터 로드를 위한 식별자와 데이터를 정의해야한다.

페이지 번호 또는 offset과 같은 식별자(key)를 Retrofit(network) 또는 Room에 전달하여 데이터를 받아오는 것이다.

 

class TodoPagingSource(
    private val dao: TodoDao
): PagingSource<Int, Todo>() {

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Todo> {
        val page = params.key ?: 1
        return try {
            val items = dao.getTodoContentsByPaging(page, params.loadSize)
            LoadResult.Page(
                data = items,
                prevKey = if (page == 1) null else page - 1,
                nextKey = if (items.isEmpty()) null else page + (params.loadSize / 10)
            )
        } catch (e: Exception) {
            return LoadResult.Error(e)
        }
    }
    
    override fun getRefreshKey(state: PagingState<Int, Todo>): Int? {
        return state.anchorPosition?.let { anchorPosition ->
            state.closestPageToPosition(anchorPosition)?.prevKey?.plus(1)
                ?: state.closestPageToPosition(anchorPosition)?.nextKey?.minus(1)
        }
    }

}

• load(params: LoadParams<Key>)
  • load 함수는 사용자가 스크롤 할 때마다 데이터를 비동기적으로 가져온다.
  • LoadParams 객체는 로드 작업과 관련된 정보를 가지고 있다.
    params.key에 현재 페이지 인덱스를 관리한다. 처음 데이터를 로드할 때에는 null이 반환된다.
    params.loadSize는 가져올 데이터의 갯수를 관리한다.
  • load 함수는 LoadResult를 반환한다.
    • LoadResult.Page : 로드에 성공한 경우, 데이터와 이전 다음 페이지 Key가 포함된다.
    • LoadResult.Error : 오류가 발생한 경우
• getRefreshKey()
  • 스와이프 Refresh나 데이터 업데이트 등으로 현재 목록을 대체할 새 데이터를 로드할 때 사용된다.
    PagingData는 Component에서 설명한 것처럼 새로고침 될 때마다 상응하는 PagingData를 생성해야한다.
    즉, 수정이 불가능하고 새로운 인스턴스를 만들어야한다.
  • 가장 최근에 접근한 인덱스인 anchorPosition으로 주변 데이터를 다시 로드한다.

 

📌 PagingData 빌드 및 구성

 PagingData를 구성하기 위해서는 이를 다른 앱 레이어에 전달하기 위한 API를 결정해야한다.

우리 포스팅에서는 Flow 타입을 사용하겠다. Flow 외에도 LiveData, RxJava(Flowable, Observable)을 모두 지원한다.

 

class TodoRepository(private val todoDao: TodoDao) {

	//..
    
    fun getTodoContentItemsByPaging(): Flow<PagingData<Todo>> {
        return Pager(
            config = PagingConfig(pageSize = 10),
            pagingSourceFactory = { TodoPagingSource(todoDao) }
        ).flow
    }
}

• PagingConfig
  • pageSize(필수 매개변수) : 각 페이지에 로드할 데이터 수를 가리킨다.
  • enablePlaceholders : 플레이스 홀더 사용 여부
  • maxSize : 기본적으로 모든 페이지를 메모리에 유지한다. 메모리 낭비 등을 해결하기 위해서 설정할 수 있다.
    (충분히 큰 수로 지정해야만 한다. 그렇지 않으면 네트워크 Request가...)
• pagingSourceFactory
  
  • PagingSource 인스턴스를 생성한다.

 

📌 PagingData 요청 및 캐시 in ViewModel

class TodoViewModel(private val repository: TodoRepository): ViewModel() {

	//..
    
    fun getContent(): Flow<PagingData<Todo>> {
        return repository.getTodoContentItemsByPaging()
            .cachedIn(viewModelScope)
    }
}

• cachedIn(CoroutineScope)
  • CoroutineScope에서 데이터를 캐시할 수 있는 메소드
  • ViewModel이기 때문에 lifecycle-viewmodel-ktx의 viewModelScope를 사용했다.

 

📌 PagingData(RecyclerView)Adapter 정의하기

class TodoAdapter:
    PagingDataAdapter<Todo, TodoAdapter.TodoViewHolder>(TODO_DIFF) {

	//..
    
    override fun onBindViewHolder(holder: TodoViewHolder, position: Int) {
        getItem(position)?.let { holder.bind(it) }
    }
}

• getItem() 메소드를 통하여 데이터를 가져온다.
  • placeholder일 경우 null 데이터가 반환된다.
• DiffUtil을 사용한다.
  (해당 포스팅에서는 DiffUtil에 다루지 않는다. 검색 또는 포스팅 하단의 깃허브 전체 코드에서 확인하자.)

 

📌 데이터 연결하기

 Activity 또는 Fragment에서 ViewModel에서 전달받은 데이터를 PagingDataAdapter로 전달하자.

class TodoFragment : Fragment() {

  //..
    
    private fun initTodoJob() {
	//..
        lifecycleScope.launch {
            viewModel.getContent().collectLatest {
                adapter.submitData(it)
            }
        }
    }

    private fun initAdapter() {
        adapter = TodoAdapter()
        binding.rvTodoList.adapter = adapter
    }
}

 

---

📕 Reference

안드로이드 공식 문서 - Paging 3

Android Codelabs - Paging

---

 RemoteMediator, LoadState, Header, Footer 등은 다음 포스팅에서 다루도록 하겠다.

 

 전체 코드는 깃허브에서 확인 가능하다. 깃허브 바로가기