무한스크롤에 Paging3 적용하기

들어가기 전에

수동으로 무한 스크롤을 구현하다가 Paging3에서 제공하는 기능은 어떤 것일까를 찾아보았다.

그랬더니 내가 수동으로 구현했던 거의 모든 기능을 라이브러리에서 제공하고 있었다!!!! 

1. 스크롤하면서 다음 페이지 데이터 호출

2. 새로 받은 데이터를 리사이클러뷰에 보여주기

3. 마지막 페이지에 오면 스탑

4. 데이터 로딩 추가

등을 라이브러리를 통해 더 간단하게 사용할 수 있도록 모두 제공해주었다.

엄청나당

 

앞으로도 사용자 페이지나 팔로잉 화면 등 무한 스크롤을 구현해야할 때가 많았고 앱 사용자가 많아짐에 따라 수동으로 모두 구현하기 보다는 라이브러리를 이용하면 효율적이고 오류 발생도 줄일 수 있을거라는 생각이 들었다. 

 

따라서  기존 수동으로 구현했던 검색 시 관련 영화 포스터를 표시해주던 부분에 Paging3를 적용해보았다. 

 

처음 Paging3를 이용하려고 했을 때에는 개념이 조금 어려워 이해하는데 시간이 다소 걸렸다.

따라서 이해했던 개념부터 정리하고 넘어가보려 한당

---

Paging3 살펴보기

Paging 라이브러리를 이용하기 위해서는 3가지 레이어에서 구성요소를 구현해줘야한다.

출처 : Android 공식 문서

1. Repository 계층

Repository 계층에서의 기본 구성요소는 PagingSource이다. 

PagingSource 개체는 데이터 소스와 해당 소스에서 데이터를 검색하는 방법을 정의해준다.

2. ViewModel 계층

 Pager 구성 요소는 PagingSource 객체 및 PagingConfig 구성 객체를 바탕으로 반응형 스트림에 노출되는

PagingData객체를 구성하기 위한 공개 Api 를 제공해준다.

 

뷰모델 계층을 UI에 연결하는 요소가 PagingData이다.

PagingData 객체는 페이지로 나눈 데이터의 스냅샷을 보유하는 컨테이너로 PagingSource 객체를 쿼리하여 결과를 저장한다.

 

3. UI 계층

UI 페이지의 기본 구성 요소는 페이지로 나눈 데이터를 처리하는 Recyclerview 어댑터인 PagingDataAdapter이다.

 

Repository 계층 - PagingSource 구현해보기

우선 PagingSource를 구현하기 위해서는 

1. PagingSource<Key, Value>를 확장해야한다. 

이 때 Key는 데이터를 로드하는데 사용되는 식별자를 의미하고, Value는 로드할 데이터의 타입을 의미한다.

나는 페이지 번호를 통해 MovieContentResult 타입의 데이터를 로드할 것이기 때문에  아래와 같이 작성해주었다.

data class MovieContentResultWithIndex(val index: Int, val result: MovieContentResult)

class MoviePagingSource(
    private val searchMovieListUseCase: SearchMovieListUseCase,
    private val query: String?,
) : PagingSource<Int, MovieContentResultWithIndex>() {
    // key :  Int : 페이지 번호
    // value : Result : 영화 정보를 가지고 있는 데이터 클래스

 

2. 이제 load 메서드를 오버라이딩해줘야한다.

load 메서드 : 데이터를 UI로 로드하는 역할을 한다.

 

- 우선 시작 페이지를 지정해주어야한다.  start라는 변수에 시작 페이지를 나타낼 변수를 담아주었다.
- 데이터는 searchMovieListUseCase를 통해 정의해둔 유즈 케이스에 검색창에 작성된 검색어와 페이지를 넘겨서 받도록 했다.

- 로드 작업의 결과를 나타내기 위해서 LoadResult.Page와 LoadResult.Error을 사용하고 있다.

LoadResult.Page는 로드 작업이 성공했을 경우 반환되는 객체이고, LoadResult.Error는 로드 작업이 실패했을 경우 반환되는 객체이다.

 

성공했을 경우 코드를 보면 아래와 같이

  //  PagingSource의 생성자에 제공된 매개변수를  load 메서드에 넘겨주어  적합한 데이터를 로드한다.
   
    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, MovieContentResultWithIndex> {
        val start = params.key ?: 1

        return try {
            val movieRequest = query?.let { MovieRequest(it, start) }
            val response = searchMovieListUseCase(movieRequest)

		// 데이터에 인덱스를 반영해주기 위한 코드
            val movieContentResultWithIndices =
                response.first().mapIndexed { index, result ->
                    MovieContentResultWithIndex((start - 1) * params.loadSize + index, result)
                }

            /*
             LoadResult : 로드 작업의 결과를 포함
              로드에 성공했을 경우 LoadResult.Page를 반환
        	  로드 실패 시 LoadResult.Error를 반환한다.
             */

            /*
            LoadResult.Page(
            data : 가져온 항목의 List로 List<Value> 형태이다.
            prevKey : 현재 페이지 앞에 항목을 가져와야하는 경우 load 메서드에서 사용하는 키 
            nextKey : 현재 페이지 뒤에 항목을 가져와야하는 경우 load 메서드에서 사용하는 키
            */ 
            
    }
}

 

크게 data, prevKey, nextKey에 대해 구현해주어야하는데

data는 가져온 항목의 List를 말한다.  

1 페이지에서 20개의 데이터가 온다면 0부터 19번째 위치까지 영화 포스터가 표시될 것이다. 

2 페이지에서도 20개의 데이터가 온다면 20번째 위치부터 29번째까지 영화 포스터가 표시되어야한다.

 

따라서 인덱스를 (start-1) * params.loadSize + index로 계산하여 모든 페이지가 알맞은 위치에 표시되도록 하였다. 이렇게 인덱스와 함께 데이터를 담고 있는 데이터 movieContentResultWithIndices를 data 부분에 작성해주었다. 

 

이 코드를 작성해주지 않아서 1페이지의 데이터가 0번째 위치에 로드되는 문제가 발생했고 이거때문에 며칠을 해맸다 ㅠㅠㅠ 꼭 반영해서 작성해주자!!!

기존에는 아래처럼 작성해주었었다. 라이브러리에서 알아서 뒤에 추가추가를 시켜주는 줄 알았음 ㅠ..ㅠ

LoadResult.Page(
                data = response.first(),
            )

 

적어주지 않을 경우 아래의 영상과 같은 결과를 맞이하게 될 것이다..

이유를 찾아보니 위처럼 reponse.first() 만 넘겨주게 되면 해당 데이터가 배치되어야하는 위치에 대한 인덱스를 조정하지 않고 현재 페이지의 데이터를 제공하게 된다고 한다.

리사이클러뷰는 항목을 보여줄 때 0부터 시작하는 인덱스를 사용하기 때문에 새 페이지의 항목에 대한 인덱스를 자동으로 조정해주지 않는다고 한다.

따라서 현재 페이지의 항목에 대한 인덱스를 계산하지 않고 새 페이지의 항목을 로드하면 기존의 항목에 덮어쓰게 된 것이다..!

 

이게 바로 그 문제의 영상

 

꼭 작성해주기를 기억하면서 다음 prevKey와 nextKey에 대해서 작성해보자

 

나는 서버에서 페이지를 기준으로 데이터를 가져오기 때문에

현재 페이지 앞의 데이터를 가져오기 위해 load 메서드에서 사용되는 prevKey에는 현재 페이지 -1을 넘겨주고,

현재 페이지 뒤의 데이터를 가져오기 위해 load 메서드에서 사용하는 nextKey에는 현재 페이지의 +1을 넘겨주기만 하면 된다.

 

페이지 번호가 기준이 아니라 아이템의 인덱스를 기준으로 가져온다면 주석에 작성한 내용을 반영하여 작성해주면 된다.

 

마지막으로 로드가 실패했을 경우 코드도 작성해주면 PagingSource는 끝이다!

LoadResult.Page(
                data = movieContentResultWithIndices,
                /*
                1. 페이지 번호를 기준으로 항목 목록의 페이지를 매기는 경우,
                preKey : 현재 페이지 번호 -1
                nextKey : 현재 페이지 번호 +1

                2. 아이템 인덱스 기준으로 페이지를 매기는 경우
                페이지 크기  : params.loadsize
                prevKey : 로드할 첫번 째 항목의 인덱스 (초기 : 0)
                    0 ~ 19 까지 첫번째 페이지에 로그되었다면
                    20이 시작 인덱스가 된다.
                nextKey : 현재 항목을 로드한 후 마지막에 로드된 항목의 인덱스
                    즉 시작 인덱스 + 로드된 아이템의 사이즈
                 */
                prevKey = if (start == 1) null else start - 1,
                nextKey = if (response.first().isEmpty()) null else start + 1,
            )
        } catch (e: Exception) {
            //  네트워크 에러와 같은 내용을 처리하고 LoadResult.Error을 반환한다.
            e.printStackTrace()
            LoadResult.Error(e)
        }

 

---

ViewModel - Flow<PaginData<Value>> 구현

이제 ViewModel에서 PagingSource로부터 페이징된 데이터 스트림을 설정해주자.

 데이터 스트림과 반응형 스트림에 대해서 정리한 내용은 아래를 읽어보자.

/*
    데이터 스트림과 반응형 스트림이란?
    1. 데이터 스트림 : 사용자가 목록을 스크롤할 때 지속적으로 방출되는 페이지가 매겨진 페이지(PagingData)의 흐름
    - 이는 Flow를 사용하여 처리된다.
    - 비동기 데이터 스트림을 콜드 및 스트림이 적극적으로 수집될 때만 데이터를 가져오거나 처리하는 방식을 사용
    - Pager에 의해 데이터 스트림이 설정되고 Flow<PagingData<MovieContentResultWithIndex>>로 반환된다.

    2. 반응형 스트림 : 데이터 스트림이 사용자 작업(스크롤) 또는 데이터 업데이트와 같은
    변경 사항에 반응하는 방식
    Flow : 반응형 스트림 , 사용자가 UI와 상호작용할 때 새 데이터를 가져오고 내보낸다.

 

Pager 클래스는 PaginSource에서 PagingData 객체의 반응형 스트림을 가져오는 메서드를 제공한다.

Paging 라이브러리는 Flow,LiveData, RxJava의 여러 스트림 타입 사용을 지원한다. 나는 기존에도 Flow를 사용하고 있었기 때문에 그대로 Flow를 사용해주었다.

 

반응형 스트림을 만들어주기 위해서는 아래 2가지를 Pager 객체에 제공해서 객체를 만들어줘야한다.

1. PagingConfig 개체

2. PagingSource 구현의 객체를 가져오는 방법을 Pager에 알려주는 함수

 private fun getMoviePagingData(query: String): Flow<PagingData<MovieContentResultWithIndex>> {
            return Pager(
                config =
                    PagingConfig(
                        // 어떻게 데이터를 가져올 것인지
                        // 페이지마다 보여줄 아이템의 수 (동일하지 않아도 됨)
                        pageSize = 20,
                        enablePlaceholders = false,
                    ),
                // PagingSource 구현의 인스턴스를 가져오는 방법을 알려주는 함수
                pagingSourceFactory = {
                    MoviePagingSource(searchMovieListUseCase, query)
                },
                // cachedIn : 데이터 스트림을 공유 가능하게 만들고 제공된 코루틴스코프를 사용하여
                // 로드된 데이터를 캐시한다.
            ).flow.cachedIn(viewModelScope)

            // Pager 객체는 PagingSource 객체에서 load 메서드를 호출하여 LoadParams 객체를
            // 제공하고 LoadResult 객체를 반환받는다.
        }

---

UI 계층 - 리사이클러뷰 어댑터 정의하기

이제 받은 데이터를 화면에 보여주기 위해서 리사이클러뷰 어댑터를 설정해줘야한다.

/*
RecyclerView를 통해 Paging한 데이터를 보여주기 위해서 PagingDataAdapter를 확장해준다.
PagingDataAdapter를 확장하여 MoviePosterAdapter 어댑터를 만들어 MovieContentResultWithIndex 타입의 목록에 대한
RecyclerView 어댑터를 제공하고  MoviePosterViewHolder ,MovieBackgroundViewHolder를 뷰홀더로 사용하고 있다.
*/

class MoviePosterAdapter(private val context: Context) : PagingDataAdapter<MovieContentResultWithIndex, MoviePosterAdapter.MoviePosterViewHolder>(MovieDiffCallback()) {

inner class MoviePosterViewHolder(private val binding: MoviePosterItemBinding) : RecyclerView.ViewHolder(binding.root) {
        init {
            binding.ivMoviePoster.setOnClickListener {
                Timber.d("clicked : $position")
                val movieId = getItem(position)?.result?.id
                val movieName = getItem(position)?.result?.title
                if (movieId != null && movieName != null) {
                    onItemClickListener?.onItemClick(movieId, movieName)
                }
            }
        }

        fun bind(movie: MovieContentResultWithIndex) {
            Glide.with(context)
                .load("https://image.tmdb.org/t/p/original${movie.result.posterPath}")
                .into(binding.ivMoviePoster)
        }
    }

 

기존의 리사이클러뷰 어댑터와  동일하게 onCreateViewHolder () 및 onBindViewHolder ()메서드를 재정의해줘야한다.

 override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int,
    ): MoviePosterViewHolder {
        val binding = MoviePosterItemBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return MoviePosterViewHolder(binding)
    }

    override fun onBindViewHolder(
        holder: MoviePosterViewHolder,
        position: Int,
    ) {
        val moviePath = getItem(position)
        if (moviePath != null) {
            holder.bind(moviePath)
        }
    }

 

기존 리사이클러뷰 어댑터와 다른 점도 2가지 있다.

1. DiffUtil.ItemCallBack을 지정해줘야한다.

2. 기존의 경우 데이터 리스트를 가지고 있지만 PagingDataAdapter의 경우 getItem(position)을 통해 아이템에 접근할 수 있다.

 

DiffUtil.ItemCallBack은 리사이클러뷰가 변경된 항목만 수정하여 업데이트를 처리하는 방식을 최적화해준다.

그동안 DiffUtil을 사용해보고 싶었는데 이번기회에 이렇게 사용해볼 수 있어 좋았다 : D

  /*
    DiffUtil.ItemCallback 지정
     */
    private class MovieDiffCallback : DiffUtil.ItemCallback<MovieContentResultWithIndex>() {
        override fun areItemsTheSame(
            oldItem: MovieContentResultWithIndex,
            newItem: MovieContentResultWithIndex,
        ): Boolean {
            return oldItem.index == newItem.index
        }

        override fun areContentsTheSame(
            oldItem: MovieContentResultWithIndex,
            newItem: MovieContentResultWithIndex,
        ): Boolean {
            return oldItem.index == newItem.index
        }
    }

 

두 가지 메서드를 구현해줘야하는데 areItemsTheSame와 areContentsTheSame이다.

areItemsTheSame는 고유식별자(예를 들어 index)를 기반으로 두 항목이 동일한지 확인해준다.

areContentsTheSame는 두 항목의 내용이 동일한지 확인해준다.

나는 데이터와 함께 인덱슬 정보를 담아줬기 때문에 여기서도 index를 기준으로 항목을 비교해주었다.

---

UI에 페이징된 데이터를 표시해주자

이제 PagingSource  , PagingData 스트림, PagingDataAdapter까지 모두 구현했다. 드디어 UI에서 페이징된 데이터를 표시할 차례이다.

먼저 PagingDataAdapter 를 확장해줬던 MoviePosterAdapter 객체를 만들어주고 리사이클러뷰에 적용해주었다.

    private val moviePosterAdapter by lazy {
        context?.let { MoviePosterAdapter(it) }
    }
    
	binding.movieRecyclerView.adapter = moviePosterAdapter

 

그 후 뷰모델에서 작성해준 PagingData 스트림을 관찰하고 생성된 값을 어댑터의 submitData() 메서드에 전달해주기만 하면 된다

// PagingData 스트림을 관찰하고 생성된 각 값을 어댑터의 submitData() 메서드에 전달한다.
        viewLifecycleOwner.lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                viewModel.moviePosterPathFlow.collectLatest {
                    moviePosterAdapter?.submitData(it)
                }
            }
        }

 

여기서 왜 viewLifecyclerOwner.lifecycleScope.launch로 작성해주었는지가 궁금하다면 아래 내용을 읽어보자!!

        /*
        Fragment는 viewLifecycleOwner.lifecycleScope를 사용해야 한다.
        - lifecycleScope.launch
         - 코루틴을 프래그먼트의 수명주기와 연결한다.
         - 프래그먼트가 유효한 상태에 있는 한 코루틴이 계속 실행된다.
         - 프래그먼트의 뷰가 삭제되어도 계속 실행될 수 있다.
         - 프래그먼트가 뷰에 의존하지 않는 작업(데이터 처리 또는 백그라운드 작업)에 적합


        -viewLifecycleOwner.lifecycleScope.launch :
         - 코루틴을 프래그먼트 뷰의 수명주기에 연결한다.
         - 뷰가 파괴될 때 코루틴이 자동으로 취소된다.
         - 일반적으로 프래그먼트가 중지되거나 교체될 때 발생한다.
         - UI 관련 작업이나 UI를 업데이트하는 (StateFlow를 관찰할 때) 선호되며, 뷰가 유효한 상태일 때 업데이트가 이루어지도록 함.

         그럼 왜 액티비티에서는 그냥 lifecycleScope.launch을 사용해도 될까?
         - 액티비티는 별도의 뷰 수명주기가 없다.
         - 액티비티의 뷰는 액티비티

 

이렇게만 하면 리사이클러뷰를 통해 데이터 소스에서 페이징된 데이터를 표시하고 다른 페이지의 데이터까지 자동으로 로드해서 볼 수 있게된다..

이전처럼 새 데이터를 어댑터에 알려주는 코드를 짤 필요도, 마지막 데이터임을 알려줄 필요도 없어졌다🥰

---

로딩 추가하기 

이전에는 로딩을 추가해주기 위해서 리사이클러뷰에서 멀티뷰를 통해 로딩만을 위해 뷰홀더를 구현해서 적용해줄 수 있었지만 Paging 라이브러리를 통해서는 코드로 바로 적용해줄 수 있다 😆 

 

먼저 레이아웃 상에서 리사이클러뷰 아래에 로딩바를 추가해준다.

 <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/movie_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:horizontalSpacing="5dp"
        app:layoutManager="GridLayoutManager"
        app:layout_constraintBottom_toTopOf="@id/movie_progress_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.0"
        app:spanCount="3"
        tools:listitem="@layout/movie_poster_item" />

    <com.google.android.material.progressindicator.LinearProgressIndicator
        app:indicatorColor="@color/primary60"
        android:id="@+id/movie_progress_bar"
        android:layout_width="0dp"
        android:layout_height="20dp"
        android:indeterminate="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent" />

 

그 후 프래그먼트에서 아래와 같이 코드를 작성해주기만 하면 끝이다!!

   // moviePosterAdapter의 loadStateFlow 속성에서 값을 수집한다.
        // 데이터의 현재 로드상태(로드 중, 성공적으로 로드되었는지, 오류가 발생했는지)를 내보낸다.
        // collectLatest : 흐름에서 방출된 최신값을 수집한다.
        // 가장 최근 상태만 중요한 UI 업데이트에서 유용하다.
        viewLifecycleOwner.lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                moviePosterAdapter?.loadStateFlow?.collectLatest {
                    binding.movieProgressBar.isVisible = it.source.append is LoadState.Loading
                }
            }
        }

 

여기서 loadStateFlow는 어댑터의 현재의 로딩 상태를 내보내는 Flow이다.

상태에는 아래 3가지가 있다.

LoadState.Loading : 로딩 중, 현재 데이터를 가져오는 중
LoadState.NotLoading  : 데이터가 성공적으로 로드된 경우
LoadState.Error : 데이터 로드 중 오류가 발생한 경우

 

it.source는 LoadState 타입으로 PagingSource에서 로드된 데이터의 상태를 말한다.

상태는 아래 3가지로 나뉜다고 한다.

it.source.append : 데이터의 추가작업 상태를 나타낸다. 목록 끝에 더 많은 항목을 로드하고 있는 경우(예를 들어 다음 페이지 로드)
it.source.prepend : 현재 항목 이전에 데이터를 로드하는 것으로 사용자가 목록을 다시 위로 스크롤하는 경우 이전 항목을 로드하고 표시하려고 할 때 prepend가 트리거된다. 
it.source.retry : 전체 데이터 세트를 다시 로드하는 것이다.

 

나는 append를 통해 데이터 추가작업에 대한 로딩을 추가해주었는데, prepend에 대한 속성도 추가해주면 사용자가 데이터 로딩 상태를 알 수 있어 더욱 좋을 것 같다 : )

 

자 이제 이렇게 구현한 무한 스크롤 결과물을 보고 마무리해보장

수동으로 구현할 때와 비교  

     binding.movieRecyclerView.addOnScrollListener(
            object : RecyclerView.OnScrollListener() {
                override fun onScrolled(
                    recyclerView: RecyclerView,
                    dx: Int,
                    dy: Int,
                ) {
                    super.onScrolled(recyclerView, dx, dy)
                    val lastVisibleItemPosition = (recyclerView.layoutManager as GridLayoutManager).findLastCompletelyVisibleItemPosition()
                    val itemTotalCount = recyclerView.adapter?.itemCount?.minus(1)

                    // 스크롤이 끝에 도달했는지 확인
                    if (lastVisibleItemPosition == itemTotalCount) {
                        currentPage++
                        viewModel.handleEvent(MovieSelectEvent.LoadNextPageMovie(queryText, currentPage))
                    }
                }
            },
        )
     
        binding.movieSearchView.setOnQueryTextListener(
            object : SearchView.OnQueryTextListener {
                override fun onQueryTextSubmit(query: String): Boolean {
                    // 처음 검색 시에는 1페이지 데이터를 가져옴
                    queryText = query
                    currentPage = 1
                    viewModel.handleEvent(MovieSelectEvent.SearchMovie(queryText, currentPage))
                    return false
                }

                override fun onQueryTextChange(newText: String?): Boolean {
                    moviePosterAdapter?.initializePosterUriList()
                    viewModel.handleEvent(MovieSelectEvent.InitializeMovieList)
                    return true
                }
            },
        )

 

수동으로 구현할 경우 아래를 직접 구현해줘야했다.

스크롤이 다 되었는지 확인

마지막 페이지까지 페이지 수를 증가시키면 api를 호출

마지막  페이지라면 더이상 페이지 수를 증가시키지 않는 로직

다음 페이지 데이터를 가져올 때마다 기존 데이터에 덧붙여주는 로직

데이터를 가져오는 동안 로딩 UI 추가

 

Paging3 라이브러리 이용 시 

DataSource로 부터 데이터를 가져오는 방법

페이지를 증가하는 방법

에 대해서만 알려주면 수동으로 구현해야했던 위 로직들을 라이브러리에서 처리해준다!