야곰 캠프 방학 중 TIL Notion -> Velog 이전하면서 복습하기!

뷰의 재사용 / 셀 이미지의 지연 로딩

prepareForReuse()

일단 뷰의 재사용을 위해서 재사용되는 cell에 남아있는 text, image 등을 털어내야 한다

이미 구현되어 있는 prepareForReuse() 메서드를 재정의하여 사용하자!

class myCell: UITableViewCell {
  ...
    
  override func prepareForReuse() {
		
  }
}  

근데, tableViewDataSource 메서드에서 cell에 정의해주면 되는거 아니야??

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = self.tableView.dequeReusableCell(withIdentifier: "ListCell")!
  if indexPath.row == 2 {
  	cell.backgroundColor = .systemRed
  } else {
    cell.backgroundColor = .systemBackground
  }
  // else를 통해 해주지 않으면 index가 2가 아니여도 cell이 재사용되면서 빨간색이 cell에 들어갈 수 있다.
}

tableView의 cell을 재사용할 때 정의해주는 것의 차이는??
cell을 만들 때부터 정의하는 것과
cell을 가져와서 configure 해주는 것은 차이가 크다

후자의 경우 load 후에 이뤄지는 과정이라 복잡하고 오래걸리는 작업이라면, 부하가 클 수 있다!!!!!

---

서버로 부터 image, Data를 가져올 경우

서버로부터 Data를 받아와서 cell에 넣어주는 경우, 발생하는 문제들이 있다

예를 들어서

위 처럼 cell이 되어 있고 각 cell의 색을 서버로부터 받아와서 표현한다면...

1. 사용자는 스크롤을 빠르게 내린다.
2. 파란색부터 사라지며 흰색 밑에 재사용되어 cell이 다시 나타난다.
3. 서버에서 데이터를 받아오는 작업은 오래걸리는 작업으로, 알맞는 indexPath에 들어가기 이전에 잠시 그 전 reuse되기 이전의 색이 나타난다.

설명하기 어려운 기록이다...
활동학습 다시 보자 <뷰의 재사용 / 셀 이미지의 지연 로딩> 1:05:20

해결방법

1. data prefetch를 사용해서 미리 data를 받아두면 delay가 없어서 index에 맞게 잘 들어간다!
공부 후.. 업데이트 하기

2. dataTask 작업 이후 completionHandler에서 capture list를 활용해서 indexPath가 같은지 비교해서 들어가려고 하는 곳이 맞는지에 대한 확인작업을 하고 -> UI에 넣어주면 된다

ARC 공부할 때 배웠던 capture list에 대해서 한번 더 생각해보고 이해하자!!!!

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell")!
    
    if indexPath.row == 0 {
      URLSession.shared.dataTask(with: URL(string: "https://wallpaperaccess.com/download/europe-4k-13691201")!) {
        data, reponse, error in
        let image = UIImage(data: data!)
        DispatchQueue.main.async {
          guard let cellIndex = tableView.indexPath(for: cell), cellIndex == indexPath else {
            return
          }
          cell.imageView?.image = image
        }
      }.resume()
    }
    
 return cell
}

추가 : UI 관련된 작업은 무조건 main Thread에서 작업해야 된다!!!