[swift] IGListDiffKit을 이용한 유저 인터페이스 디자인

20 Nov 2023

swift

이 글은 Swift 언어를 사용하여 IGListDiffKit을 이용해 유저 인터페이스 디자인을 구현하는 방법에 대해 설명합니다.

1. IGListDiffKit란?

IGListDiffKit은 Instagram에서 개발된 컬렉션뷰의 데이터 업데이트를 효율적으로 처리하기 위한 라이브러리입니다. 이를 사용하면 컬렉션뷰의 데이터를 업데이트할 때 필요한 로직을 쉽게 작성할 수 있으며, 성능적인 측면에서도 효율적입니다.

2. IGListDiffKit 설치하기

IGListDiffKit은 Cocoapods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가해주세요.

pod 'IGListDiffKit'

그리고 터미널에서 다음 명령어로 Cocoapods를 설치하고 프로젝트를 업데이트 해주세요.

$ pod install

3. IGListDiffKit을 이용한 인터페이스 디자인 구현하기

IGListDiffKit을 사용하여 인터페이스 디자인을 구현하려면 다음의 단계를 따라야 합니다.

3.1 IGListKit 데이터 모델 정의하기

먼저, IGListKit 데이터 모델을 정의합니다. IGListKit 데이터 모델은 섹션과 셀을 구성하는 데이터를 담는 클래스입니다. 각각의 섹션과 셀은 고유한 식별자를 가지고 있으며, 업데이트시 이 식별자를 기준으로 구분합니다.

class MyDataModel: NSObject, ListDiffable {
    let uniqueID: String
    let title: String
    let subtitle: String
    
    init(uniqueID: String, title: String, subtitle: String) {
        self.uniqueID = uniqueID
        self.title = title
        self.subtitle = subtitle
    }
    
    func diffIdentifier() -> NSObjectProtocol {
        return uniqueID as NSObjectProtocol
    }
    
    func isEqual(toDiffableObject object: ListDiffable?) -> Bool {
        guard let object = object as? MyDataModel else {
            return false
        }
        
        return self.title == object.title && self.subtitle == object.subtitle
    }
}

3.2 IGListAdapter 생성하기

디자인에 사용할 데이터를 담은 모델과 컬렉션뷰를 연결하는 IGListAdapter를 생성합니다. IGListAdapter는 IGListKit 데이터를 컬렉션뷰에 표시하고, 필요한 업데이트를 수행하는 역할을 담당합니다.

listAdapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self)
listAdapter.collectionView = collectionView
listAdapter.dataSource = self

3.3 IGListAdapterDataSource 구현하기

IGListAdapterDataSource는 IGListAdapter에서 필요한 데이터를 제공하는 프로토콜입니다. 컬렉션뷰의 섹션 개수, 각 섹션의 셀 개수, 셀의 컨텐츠 등을 구현할 수 있습니다.

// 섹션 개수 구현
func numberOfSections(in listAdapter: ListAdapter) -> Int {
    return data.count
}

// 각 섹션의 셀 개수 구현
func listAdapter(_ listAdapter: ListAdapter, numberOfItemsInSection section: Int) -> Int {
    return data[section].count
}

// 각 셀의 컨텐츠 구현
func listAdapter(_ listAdapter: ListAdapter, cellForItemAt index: Int) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: index) as! MyCell
    let item = data[index]
    
    cell.titleLabel.text = item.title
    cell.subtitleLabel.text = item.subtitle
    
    return cell
}

3.4 데이터 업데이트하기

앱에서 데이터가 변경되었을 때는 IGListAdapter의 performUpdates(animated:) 메서드를 호출하여 변경사항을 업데이트합니다.

// 데이터 업데이트 예시
let newData = // 새로운 데이터 세트를 가져옴

let result = ListDiffPaths(fromSection: 0, toSection: newData.count - 1, oldArray: data, newArray: newData, option: .equality)
data = newData

listAdapter.performUpdates(animated: true, completion: nil)

4. 마무리

이제 IGListDiffKit을 이용해 유저 인터페이스 디자인을 구현하는 방법을 알아보았습니다. IGListDiffKit은 데이터 업데이트를 처리하는데 있어서 효율적인 방법을 제공하므로, 복잡한 인터페이스 구현에 유용하게 사용될 수 있습니다.

더 자세한 내용은 IGListDiffKit의 공식 문서를 참고하시기 바랍니다.

목차