[Swift]UITableViewDataSourcePrefetching 테이블 뷰셀에 데이터 미리 로드 시키기

UITableViewDataSourcePrefetching 은 프로토콜의 한 종류로 사용자의 화면에서 보여지기 전에 셀에서 처리해야 하는 연산이 긴 경우 미리 연산을 수행할 수 있게 해주는 DataSource 입니다. 이러한 경우가 아니라면 굳이 잘 사용되지 않지만 이번에 데이터를 외부로 부터 받아와 셀에 보여주는 경우에 대해 공부하면서 알게 되어 포스팅 해볼까 합니다. 

---

prefetch란?

진행 중인 처리와 병행하여 필요하다고 생각되는 데이터를 사전에 판독하는 것을 말한다. 

- 출처 : 컴퓨터인터넷IT용어대사전

 

사용자 화면에 보여지는 테이블 뷰의 데이터 소스와 더불어 셀에서 미리 데이터를 준비해야 하거나 데이터를 준비(처리)하는 시간이 긴 경우 사용하게 되며 tableView(_:cellForRowAt:)메소드가 실행 되기 전에 프리페치가 수행됩니다. 

 

그러나 DataSourcePrefetching 을 사용할 때 주의가 필요합니다. 

 

Loading Data Asynchronously

셀의 데이터를 미리 준비하고 처리하기 위해서 비동기로 수행됩니다. 프리페치 메서드는 모든 셀에서 수행되는 것은 아니지만 tableView(:cellForRowAt:)은 반드시 구현해야 합니다. (prefetch는 반드시 아님)

그 이유는 아래와 같은 이유 때문!

 

1. 프리페치 호출을 통해 미리 로드 되었고 이 데이터가 화면에 보여줄 준비가 되었음(사용자의 기기 화면을 말함)

2. 데이터가 현재 프리페치 로직을 실행 중이나 아직 사용이 불가능한 상태

3. 프리페치가 아직 호출되지 않아서 화면에 보여줄 상태가 준비 되지 않았고 데이터도 준비되지 않았을때

 

이와 같은 이유로 tableView(:cellForRowAt:)을 반드시 호출해 줘야 하고 프리페치는 비동기로 이루어지게 됩니다. 

 

---

예제

우선은 필요한 변수 선언과 UI 셋팅 해주겠습니다

var tableView : UITableView = {
    let tableView = UITableView()
    return tableView
}()
    
var dataArray = [String](repeating: "false", count: 100)

dataArray는 String. 어레이로 테이블 뷰 셀에 들어갈 default 값을 가지고 있습니다.

 

1. UITableViewDelegate와 UITableViewDataSource를 따르도록 해줍니다.

  override func viewDidLoad() {
        super.viewDidLoad()
        
        self.tableView.delegate = self
        self.tableView.dataSource = self
        self.tableView.prefetchDataSource = self
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        tableView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
        self.view.addSubview(tableView)
        
    }

delegate, dataSource, prefetchDataSourece 각 프로토콜을 생성하고 해당 프로퍼티에 assing 해줍니다.

register로 재사용할 셀의 아이디를 등록해 줍니다.

 

2. DataSource와 Delegate 

  func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")!
        if dataArray[indexPath.row] != "false" {
            cell.textLabel?.text = dataArray[indexPath.row]
            print("cellForRowAt \(indexPath.row)")
        } else {
            self.prefetchCellData(indexPath)
        }
        
        
        return cell
    }

셀의 갯수는 dataArray의 갯수 만큼 100개 생성해줍니다. cellForRowAt 을 보면 데이터 어레이의 디폴트 값을 비교해서 해당 셀에 데이터가 로드 됬는지 판별합니다. 다른 조건도 있고,  api로 url을 통해 외부 데이터를 받아오는 경우 dataTask를 통해 알아보는 방법도 있습니다. 데이터가 로드 되었다면 해당 셀의 텍스트 라벨에 로드된 데이터 값을 넣어주고 아닌 경우 데이터를 로드하기 위해 prefetchCellData라는 함수를 호출 합니다.

 

cellForRowAt에서 prefetchCellData가 필요한 이유는 빌드하고 앱을 실행할 경우 처음 보여지는 셀의 경우 이미 화면에 보여지고 있기 때문에 prefetch관련 메소드를 타지 않습니다. 따라서 만약 처음 화면에 보여지는 셀들이 데이터를 가지고 있지 않을 경우 prefet에서 호출하는 메소드를 실행 할 수 있도록 해줍니다. 

3. 데이터 로드용 메소드 작성

  func prefetchCellData(_ indexPath: IndexPath) {
  
        dataArray[indexPath.row] = "\(indexPath.row)"
        
        
        DispatchQueue.main.async {
            let indexPath = IndexPath(row: indexPath.row, section: 0) // 로드할 인덱스 패스
            if self.tableView.indexPathsForVisibleRows?.contains(indexPath) ?? false { // 만약 보이지 않는 셀이면 nil을 반환하는 옵셔널 체이닝
                self.tableView.reloadRows(at: [IndexPath(row: indexPath.row, section: 0)], with: .fade) // 해당 셀만 리로드
            }
        }
        
    }

이 메소드에서는 dataArray의 해당 셀의 데이터를 넣어 줍니다. prefetch는 앞서 소개했듯이 async로 동작하기 때문에 테이블 뷰를 다시 리로드 하는 경우 DispatchQueue로, UI 작업을 하므로 메인 스레드에서 동작해야 합니다. 

 

4. prefetchDataSource

  func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
        for indexPath in indexPaths {
            
            print("prefetchRowsAt \(indexPath.row)")
            self.prefetchCellData(indexPath)
        }
        
    }
    
    func tableView(_ tableView: UITableView, cancelPrefetchingForRowsAt indexPaths: [IndexPath]) {
        for indexPath in indexPaths {
            print("cancelPrefetchingForRowsAt \(indexPath.row)")
            dataArray[indexPath.row] = "false"
        }
    }

 

 

실행 화면

앱을 실행하면 화면에 안보이는 셀인 19 ~ 28 번째 셀은 prefetchRowsAt의 코드가 실행되어 미리 데이터를 prefetch 한것을 볼 수 있습니다. 여기서 왜 cellForRowAt을 꼭 지정해 줘야 하는지 알 수 있는데 실행하자 마자 사용자의 화면에 보이는 셀들은 prefetchRowAt을 타지 않고 cellForRowAt으로 셀을 로드한 것을 알 수 있습니다. 

---

여기까지 UITableViewDataSourcePrefetching 에 대해서 알아봤습니다. 이상한 것이 있거나 고칠 부분이 있다면 댓글로 알려주시면 정말 감사합니다.