[swift] IGListDiffKit을 사용한 클릭 가능한 셀 구현

20 Nov 2023

swift

IGListDiffKit은 iOS 애플리케이션에서 비교적 복잡한 데이터셋을 관리하고 업데이트하는 데 도움을 주는 라이브러리입니다. 이 라이브러리를 사용하면 테이블뷰나 컬렉션뷰에서 셀의 업데이트를 최적화하고 성능을 향상시킬 수 있습니다. 이번에는 IGListDiffKit을 사용하여 클릭 가능한 셀을 구현하는 방법에 대해 알아보겠습니다.

IGListDiffKit 기본 설정

첫째로, 프로젝트에 IGListDiffKit을 설치해야 합니다. CocoaPods를 사용하고 있다면 Podfile에 다음과 같이 추가합니다.

pod 'IGListDiffKit'

설치가 완료되면 프로젝트를 열고 IGListDiffKit을 import 합니다.

import IGListDiffKit

클릭 가능한 셀 구현

클릭 가능한 셀을 구현하기 위해 다음과 같은 단계를 따릅니다.

1. 모델 클래스 생성

먼저, 클릭 가능한 셀에 대한 모델 클래스를 생성합니다. 이 클래스는 IGListDiffable 프로토콜을 구현해야 합니다.

class ItemModel: NSObject, IGListDiffable {
    let itemId: String
    let title: String

    init(itemId: String, title: String) {
        self.itemId = itemId
        self.title = title
    }

    // IGListDiffable 프로토콜 구현
    func diffIdentifier() -> NSObjectProtocol {
        return itemId as NSObjectProtocol
    }

    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        guard let object = object as? ItemModel else {
            return false
        }
        return itemId == object.itemId
    }
}

이 예제에서는 itemId와 title을 가진 클래스를 생성했습니다. diffIdentifier 메서드에서는 고유한 식별자로 itemId를 사용하고, isEqual 메서드에서는 itemId가 같은지 비교합니다.

2. 데이터 소스 생성

다음으로, IGListAdapterDataSource를 구현하는 데이터 소스 클래스를 생성합니다.

class DataSource: NSObject, IGListAdapterDataSource {
    var items: [ItemModel] = []

    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        return items
    }

    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        return ItemSectionController()
    }

    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
        return nil
    }
}

이 예제에서는 items 배열을 데이터 소스로 사용합니다. objects(for:) 메서드에서는 items 배열을 반환하고, listAdapter(_:sectionControllerFor:) 메서드에서는 각 아이템에 대한 섹션 컨트롤러를 반환합니다. emptyView(for:) 메서드는 빈 화면을 표시하기 위해 사용됩니다.

3. 섹션 컨트롤러 생성

이제 클릭 가능한 셀의 섹션 컨트롤러를 생성합니다. IGListSectionController를 상속받은 클래스를 생성합니다.

class ItemSectionController: IGListSectionController {
    var item: ItemModel?

    override func numberOfItems() -> Int {
        return 1
    }

    override func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: collectionContext?.containerSize.width ?? 0, height: 50)
    }

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(withNibName: "ItemCell", bundle: nil, for: self, at: index) as? ItemCell else {
            fatalError("Unable to dequeue cell")
        }
        cell.titleLabel.text = item?.title
        return cell
    }

    override func didUpdate(to object: Any) {
        item = object as? ItemModel
    }
}

extension ItemSectionController: IGListSingleSectionControllerDelegate {
    func didSelect(_ sectionController: IGListSingleSectionController) {
        guard let model = item else {
            return
        }
        // 클릭 이벤트 처리
        print("Selected item: \(model.title)")
    }
}

이 예제에서는 numberOfItems, sizeForItem, cellForItem 메서드를 구현하여 섹션 컨트롤러의 크기와 셀을 구성합니다. didSelect(_:IGListSingleSectionControllerDelegate) 메서드에서는 셀의 선택 이벤트를 처리하고, 클릭한 아이템의 정보를 출력합니다.

4. 리스트 어댑터 설정

마지막으로 리스트 어댑터를 설정하여 클릭 가능한 셀을 사용할 준비를 마무리합니다.

class ViewController: UIViewController {
    let adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: nil)
    let dataSource = DataSource()

    override func viewDidLoad() {
        super.viewDidLoad()

        adapter.collectionView = collectionView
        adapter.dataSource = dataSource
    }
}

이 예제에서는 ViewController 클래스에서 IGListAdapter와 DataSource를 생성하고, viewDidLoad() 메서드에서 adapter의 collectionView와 dataSource를 설정합니다.

이제 클릭 가능한 셀을 구현할 준비가 완료되었습니다. IGListDiffKit을 사용하여 데이터셋을 업데이트하고 클릭 이벤트를 처리하는 방법을 배웠습니다. IGListDiffKit을 사용하면 복잡한 데이터셋을 관리하고 효율적으로 업데이트할 수 있기 때문에 대용량 데이터를 다루는 애플리케이션에 매우 유용합니다.

참고 자료

IGListDiffKit GitHub 레포지토리: https://github.com/Instagram/IGListKit