[swift] RxSwift를 사용한 페이징 처리 방법

20 Nov 2023

swift

이번 블로그에서는 RxSwift를 사용하여 페이징 처리를 어떻게 할 수 있는지 알아보겠습니다. RxSwift는 Reactive Programming 라이브러리로 비동기 및 이벤트 기반 프로그래밍을 쉽게 할 수 있게 해줍니다. 페이징처리는 대용량 데이터를 효율적으로 불러올 수 있도록 도와줍니다.

준비 사항

RxSwift와 RxCocoa를 프로젝트에 추가합니다. 최신 버전을 사용하는 것을 권장합니다.
API 요청을 위한 네트워크 라이브러리를 사용합니다. 예를 들어 Alamofire를 사용할 수 있습니다.

페이징 처리 방법

첫번째로, Observable을 사용하여 데이터를 요청하는 함수를 만듭니다. 이 함수에서는 원하는 페이지의 데이터를 가져오고 Observable을 반환합니다.

func fetchData(page: Int) -> Observable<[Data]> {
    return Observable.create { observer in
        // API 요청 코드 작성
        // 네트워크 라이브러리를 사용하여 데이터를 요청하고, 성공 혹은 실패 시 observer.onNext(), observer.onError()를 호출합니다.
        
        return Disposables.create()
    }
}

다음으로, 페이징 처리를 위해 BehaviorSubject를 사용합니다. 이는 초기에는 빈 데이터를 반환하다가, 페이지 요청이 있을 때마다 데이터를 업데이트하는 역할을 합니다.

let pageSubject = BehaviorSubject<Int>(value: 1)
let disposeBag = DisposeBag()

pageSubject.flatMap { page in
    return fetchData(page: page)
}
.subscribe(onNext: { data in
    // 데이터 처리 코드 작성
    // 받아온 데이터를 사용하여 UI를 업데이트합니다.
}, onError: { error in
    // 에러 처리 코드 작성
    // 요청 중 에러가 발생한 경우 처리합니다.
}, onDisposed: {
    // 종료 처리 코드 작성
    // 구독이 종료되었을 때 호출됩니다.
})
.disposed(by: disposeBag)

이제 페이징 처리를 위해 ScrollView나 CollectionView 등의 UI 컴포넌트를 사용하여 스크롤로 페이지를 이동할 수 있도록 합니다.

scrollView.rx.contentOffset
    .flatMap { [weak self] offset -> Observable<Bool> in
        guard let self = self else { return .empty() }
        let visibleHeight = self.scrollView.frame.height
        let contentHeight = self.scrollView.contentSize.height
        
        // 스크롤이 아래쪽으로 이동할 때마다 페이지를 증가시킵니다.
        let shouldLoadNextPage = (offset.y + visibleHeight) >= contentHeight
        
        return shouldLoadNextPage ? .just(true) : .empty()
    }
    .subscribe(onNext: { [weak self] _ in
        guard let self = self else { return }
        
        // 다음 페이지를 요청하고 BehaviorSubject를 업데이트합니다.
        let currentPage = try? self.pageSubject.value()
        self.pageSubject.onNext(currentPage + 1)
    })
    .disposed(by: disposeBag)

위와 같이 페이지를 넘길 때마다 fetchData 함수를 호출하고, 받아온 데이터를 UI에 업데이트하여 페이징 처리를 완성할 수 있습니다.

이러한 방식으로 RxSwift를 사용하여 효율적인 페이징 처리를 할 수 있습니다. Reactvie Programming의 강력한 특성을 활용하여 쉽고 편리하게 페이징 처리를 구현할 수 있으니, 참고하시기 바랍니다.

준비 사항

페이징 처리 방법

참고 자료