비동기적으로 테이블뷰, 컬렉션뷰의 이미지 로드하기 Asynchronously Loading Images into Table and Collection Views

Asynchronously Loading Images into Table and Collection Views

원문 확인 (샘플 프로젝트 다운로드 링크 포함)

https://developer.apple.com/documentation/uikit/views_and_controls/table_views/asynchronously_loading_images_into_table_and_collection_views

개요

이미지 캐싱은 당신의 앱의 테이블뷰와 컬렉션뷰가 인스턴스를 빠르게 만들고 스크롤에 빠르게 응답하도록 도와줍니다. 샘플 프로젝트의 앱은 URL을 통해 이미지를 가져오는 것을 시연합니다. 이미지들은 assets catalog의 일부가 아닌, URL을 통해 비동기적으로 각각 로딩을 시뮬레이션하기 위한 앱 bundle의 일부입니다. 이는 유저 인터페이스가 계속 반응하도록 보장해 줍니다. 이 프로젝트는 Mac Catalyst 또한 지원합니다.

이미지 로딩과 캐싱 다루기

이 예시에서, ImageCache.swift 클래스는 URLSession으로 URL을 통한 이미지 다운로드와 NSCache를 통한 이미지 캐싱의 기본 매커니즘을 보여 줍니다. UITableView와 UICollectionView 같은 뷰들은 UIScrollView의 서브클래스입니다.

유저가 뷰에서 스크롤을 할 때, 앱은 같은 이미지를 반복적으로 요청합니다. 이 예시는 이미지가 로드될 때 까지 관련된 completion block을 유지하다가, 요청한 모든 block에 이미지를 전달함으로써, API가 주어진 URL에 대해 한 번만 이미지를 요청하도록 해 줍니다. 아래 코드는 어떻게 샘플 프로젝트가 기본 캐싱 및 로딩 메서드를 구성하는지를 보여줍니다:

// 이미지가 있다면 캐싱된 이미지를 반환하고, 그렇지 않으면 비동기적으로 이미지를 로드 및 캐시합니다.
final func load(url: NSURL, item: Item, completion: @escaping (Item, UIImage?) -> Swift.Void) {
    // 캐시된 이미지를 확인합니다.
    if let cachedImage = image(url: url) {
        DispatchQueue.main.async {
            completion(item, cachedImage)
        }
        return
    }
    // 해당 이미지에 대해 둘 이상의 요청자가 있는 경우, completion 블록을 추가합니다.
    if loadingResponses[url] != nil {
        loadingResponses[url]?.append(completion)
        return
    } else {
        loadingResponses[url] = [completion]
    }
    // 이미지를 가져옵니다.
    ImageURLProtocol.urlSession().dataTask(with: url as URL) { (data, response, error) in
        // error와 data를 확인하고, 이미지 생성을 시도합니다.
        guard let responseData = data, let image = UIImage(data: responseData),
            let blocks = self.loadingResponses[url], error == nil else {
            DispatchQueue.main.async {
                completion(item, nil)
            }
            return
        }
        // 이미지를 캐싱합니다.
        self.cachedImages.setObject(image, forKey: url, cost: responseData.count)
        // 해당 이미지의 요청자에 대해 반복해서 이미지를 전달합니다.
        for block in blocks {
            DispatchQueue.main.async {
                block(item, image)
            }
            return
        }
    }.resume()
}

책임감 있게 데이터소스 업데이트하기?

실행 시에 모든 데이터를 로드하는 앱은 완료까지 오래 걸리기 때문에, 메모리 부족이나 종료될 위험성이 있습니다. 앱이 실행되기 전에 모든 데이터가 로드되기를 요구하지 않는 이상, UI가 요청할 때만 이미지를 로드하십시오.

Note

화면에 보여지기 전 항목들을 확실히 로드하기 위해서, 가능하다면 prefetching API들을 사용해 보십시오. 데이터의 prefetching의 좋은 예시는 Prefetching Collection View Data를 확인하십시오.

일반적으로 앱은 데이터소스가 셀이 이미지를 가져오고 설정할 때 까지 기다려야 합니다. 샘플 프로젝트는 재사용 가능한 뷰에서 이미지를 가져오고 보여주는 하나의 접근을 시연합니다:

var content = cell.defaultContentConfiguration()
content.image = item.image
ImageCache.publicCache.load(url: item.url as NSURL, item: item) { (fetchedItem, image) in
    if let img = image, img != fetchedItem.image {
        var updatedSnapshot = self.dataSource.snapshot()
        if let datasourceIndex = updatedSnapshot.indexOfItem(fetchedItem) {
            let item = self.imageObjects[datasourceIndex]
            item.image = img
            updatedSnapshot.reloadItems([item])
            self.dataSource.apply(updatedSnapshot, animatingDifferences: true)
        }
    }
}
cell.contentConfiguration = content