Swift 4 TableView 이미지 메모이제이션 기법

IOS 개발을 하면서 테이블 뷰를 정말 많이 사용합니다.

애플도 문자 목록, 메일, 통화 목록 등 집합 데이터를 표현하는 필수 뷰이기 때문입니다.

AOS의 리사이클러 뷰 와 iOS 테이블 뷰는 동일한 구조입니다.

재사용 매커니즘(Reuse Mechanism) 원리를 통해 동작 한다는 것입니다.

데이터가 30가 있어도 화면에 보여질 셀 만큼만 만들어 지기 때문에 7개만 셀이 생성될 수도 있고 5개만 생성될 수도 있습니다.

스크롤 할때 마다 보여지지 않는 셀을 가져오거나 새로 생성해서 다시 데이터를 보여주는 방식이기 때문입니다.

인스타그램 처럼 레이아웃을 만들어보고 싶어서 API Server 만들고

네트워크 통신을 해서 이미지를 불러오는 방식을 쓰려고 url을 그대로 사용하는데. 

tableView(_:cellForRowAt:) 함수에서 매번 url 이미지 정보를 

네트워크 통신으로 가져온다면 스크롤 할 때마다 네트워크 통신을 하는것과 같습니다.

메모이제이션(memoization) 기법

네트워크 통신을 통해 읽은 데이터는 재사용할 수 있도록 캐싱(Caching) 처리하여 네트워크 통신 횟수를 줄이는 것이 좋습니다.

import UIKit
 
 
class Model {
 
   ...
 
   var imageData: UIImage?    
   
   ...
 
}

UIImage 객체를 담을 변수를 Model에 선언해 줍니다.

    // 웹 이미지를 읽어와 UIImage 객체로 생성
    let url: URL! = URL(string: model.imageUrl!)
    let imageData = try! Data(contentsOf: url)
    model.imageData = UIImage(data: imageData)

네트워크 통신을 최초로 하는 처리 메소드에서 

이미지 url을 UIImage 객체화 해서 Model에 넣어줍니다.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    ...
 
    // 매번 이미지를 웹으로 읽는 방식
    // let url = URL(string: row.imageUrl!)!
    // let data = try! Data(contentsOf: url)
    // cell.imgView.image = UIImage(data: data) // 이미지 캐싱
 
    // 이미지 객체를 대입 메모이제이션 (memoization) 기업
    cell.imgView.image = row.imageData
 
    return cell
}

REST 통신을 통해 가져온 데이터를 객체로 받은 url로 네트워크 통신하는게 아닌

이미지 객체화 하여 변수에 담아 스크롤 할때 매번 통신을 방지하는 기법입니다.

이렇게 객체에 저장한다면 테이블 뷰의 셀을 재사용 하더라도 매번 네트워크 통신을 하지 않아 스크롤이 부드러운 UI를 유지할 수 있습니다.