[swift] Swift IGListKit을 사용한 컬렉션 뷰 셀 재사용하기

27 Nov 2023

swift

이번 글에서는 Swift에서 IGListKit을 사용하여 컬렉션 뷰 셀을 재사용하는 방법에 대해 알아보겠습니다. IGListKit은 Instagram에서 개발한 강력한 컬렉션 뷰 관리 도구로, 대량의 데이터를 효율적으로 처리할 수 있고 셀 재사용을 편리하게 할 수 있습니다.

IGListKit 소개

IGListKit은 컬렉션 뷰의 기본 기능을 보완하여 더욱 효율적으로 데이터를 구성하고 관리할 수 있는 기능을 제공합니다. IGListKit은 기본적으로 데이터 소스와 섹션 컨트롤러로 구성되며, 컬렉션 뷰의 각 셀을 적절하게 관리합니다. IGListKit은 또한 셀 재사용을 위한 방법을 제공하여 메모리 사용량을 최소화하고 성능을 향상시킵니다.

IGListKit을 사용하여 컬렉션 뷰 셀 재사용하기

IGListKit을 사용하여 컬렉션 뷰 셀을 재사용하기 위해서는 다음 단계를 따라야 합니다:

IGListKit을 프로젝트에 추가합니다. CocoaPods를 사용하면 다음과 같이 Podfile에 추가하고 pod install 명령을 실행하여 라이브러리를 설치할 수 있습니다.

pod 'IGListKit'

IGListKit을 import합니다.

import IGListKit

데이터 모델 클래스를 작성합니다. IGListKit은 데이터 모델을 기반으로 셀을 구성하고 관리합니다.

class MyDataModel: NSObject, ListDiffable {
    let title: String
    let subtitle: String
    
    init(title: String, subtitle: String) {
        self.title = title
        self.subtitle = subtitle
    }
    
    // ListDiffable 프로토콜 메서드 구현
    func diffIdentifier() -> NSObjectProtocol {
        return title as NSObjectProtocol
    }
    
    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        if let object = object as? MyDataModel {
            return title == object.title && subtitle == object.subtitle
        }
        return false
    }
}

컬렉션 뷰 셀 클래스를 작성합니다. IGListKit은 컬렉션 뷰 셀을 동적으로 생성하고 관리할 수 있습니다.

class MyCollectionViewCell: UICollectionViewCell, ListBindable {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var subtitleLabel: UILabel!
    
    // ListBindable 프로토콜 메서드 구현
    func bindViewModel(_ viewModel: Any) {
        if let viewModel = viewModel as? MyDataModel {
            titleLabel.text = viewModel.title
            subtitleLabel.text = viewModel.subtitle
        }
    }
}

섹션 컨트롤러 클래스를 작성합니다. 섹션 컨트롤러는 IGListKit의 핵심 요소로, 데이터 소스와 컬렉션 뷰의 관리를 담당합니다.

class MySectionController: ListSectionController {
    var dataModel: MyDataModel?
    
    override init() {
        super.init()
        // 셀의 사이즈 설정
        self.inset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    }
    
    // 섹션 컨트롤러에 데이터 모델 설정
    override func didUpdate(to object: Any) {
        dataModel = object as? MyDataModel
    }
    
    // 섹션 컨트롤러에서 사용할 셀 반환
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(withNibName: "MyCollectionViewCell", bundle: nil, for: self, at: index) as? MyCollectionViewCell else {
            fatalError()
        }
        return cell
    }
    
    // 셀의 크기를 반환
    override func sizeForItem(at index: Int) -> CGSize {
        guard let context = collectionContext, let dataModel = dataModel else {
            return .zero
        }
        let width = context.containerSize.width - inset.left - inset.right
        let height = // 적절한 높이 계산하기
        return CGSize(width: width, height: height)
    }
    
    // 데이터 모델과 셀을 연결하기 위해 호출되는 메서드
    override func didUpdate(to object: Any) {
        dataModel = object as? MyDataModel
    }
}

컬렉션 뷰 컨트롤러에서 IGListKit을 초기화하고 섹션 컨트롤러를 등록합니다. IGListKit은 컬렉션 뷰로부터 데이터를 받아와 섹션 컨트롤러에 전달합니다.

class MyCollectionViewController: UIViewController, ListAdapterDataSource {
    var data: [MyDataModel] = []
    let adapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        adapter.collectionView = collectionView
        adapter.dataSource = self

        // 데이터를 가져와서 data 배열에 추가

        adapter.reloadData()
    }
    
    // 섹션 컨트롤러에 표시할 데이터 반환
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return data
    }
    
    // IGListKit에 섹션 컨트롤러를 등록
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        return MySectionController()
    }
    
    // 섹션 컨트롤러의 헤더 뷰 반환
    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        return nil
    }
}

위의 단계를 따르면 IGListKit을 사용하여 컬렉션 뷰 셀을 효율적으로 재사용할 수 있게 됩니다. IGListKit은 셀의 재사용을 관리해주기 때문에 메모리 사용률이 낮아지고 성능이 향상될 것입니다.

이제 IGListKit을 활용하여 컬렉션 뷰를 구성하고 데이터를 재사용하는 방법에 대해 알게 되었습니다. IGListKit은 대량의 데이터를 처리할 때 유용한 도구이므로, 복잡한 컬렉션 뷰를 관리해야 하는 경우 IGListKit을 고려해보는 것이 좋습니다.

IGListKit 소개

IGListKit을 사용하여 컬렉션 뷰 셀 재사용하기

참고 자료