[swift] IGListKit에서 셀 내부에 데이터 모델 연동하는 방법

15 Nov 2023

swift

IGListKit은 UICollectionView 및 UITableView와 같은 대규모 리스트 인터페이스를 관리하기 위한 강력한 프레임워크입니다. IGListKit을 사용하면 셀 내부에 데이터 모델을 연동하여 데이터의 변경에 따라 자동으로 업데이트되는 리스트를 쉽게 구현할 수 있습니다.

이 문서에서는 IGListKit을 사용하여 셀 내부에 데이터 모델을 연동하는 방법에 대해 설명하겠습니다.

IGListKit 사용 설정하기

먼저, IGListKit을 사용하기 위해 프로젝트에 IGListKit을 설치해야 합니다. IGListKit은 CocoaPods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 IGListKit을 추가합니다.

pod 'IGListKit'

설치가 완료되면 Xcode에서 프로젝트 파일을 열고 import 문을 추가하여 IGListKit을 사용할 수 있도록 해야 합니다.

import IGListKit

데이터 모델 생성하기

IGListKit에서는 리스트에 표시될 각 셀에 대한 데이터 모델을 생성해야 합니다. 이 예제에서는 User라는 간단한 데이터 모델을 사용합니다. User 모델은 사용자의 이름과 프로필 사진을 가지고 있습니다.

class User: NSObject {
    let name: String
    let profileImage: UIImage
    
    init(name: String, profileImage: UIImage) {
        self.name = name
        self.profileImage = profileImage
    }
}

셀 클래스 구현하기

다음으로, 각 셀을 위한 UICollectionViewCell 서브 클래스를 생성해야 합니다. 이 예제에서는 ProfileCell이라는 셀 클래스를 사용합니다.

class ProfileCell: UICollectionViewCell {
    
    @IBOutlet weak var profileImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    
    func configure(with user: User) {
        profileImageView.image = user.profileImage
        nameLabel.text = user.name
    }
}

Adapter 클래스 구현하기

IGListKit에서는 각 셀에 대한 데이터 모델을 연결해주는 Adapter 클래스를 사용합니다. 이 Adapter 클래스는 IGListAdapterDataSource 프로토콜을 구현해야 합니다. 이 예제에서는 ProfileAdapter 클래스를 사용하여 데이터 모델을 셀에 연결합니다.

class ProfileAdapter: NSObject, IGListAdapterDataSource {
    
    let users: [User]
    
    init(users: [User]) {
        self.users = users
    }
    
    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        return users as [IGListDiffable]
    }
    
    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        return ProfileSectionController()
    }
    
    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
        return nil
    }
}

Section Controller 클래스 구현하기

마지막으로, 각 섹션에 대한 IGListSectionController를 구현해야 합니다. 이 Section Controller는 해당 섹션에 표시될 셀을 관리하고 데이터 모델을 셀에 연결합니다. 이 예제에서는 ProfileSectionController라는 섹션 컨트롤러를 사용합니다.

class ProfileSectionController: IGListSectionController {
    
    var user: User!
    
    override init() {
        super.init()
        inset = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    }
    
    override func numberOfItems() -> Int {
        return 1
    }
    
    override func sizeForItem(at index: Int) -> CGSize {
        return CGSize(width: collectionContext!.containerSize.width, height: 100)
    }
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(of: ProfileCell.self, for: self, at: index) as? ProfileCell else {
            fatalError("Could not dequeue cell")
        }
        
        cell.configure(with: user)
        
        return cell
    }
    
    override func didUpdate(to object: Any) {
        user = object as? User
    }
    
    override func didSelectItem(at index: Int) {
        // 셀 선택 시 동작 구현
    }
}

리스트 설정하기

마지막으로, 리스트를 설정하여 IGListKit을 사용할 준비를 마쳤습니다. 이 예제에서는 UIViewController에서 IGListCollectionView를 사용합니다.

class ProfileViewController: UIViewController {
    
    @IBOutlet weak var collectionView: IGListCollectionView!
    var adapter: IGListAdapter!

    var users: [User] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        collectionView.collectionViewLayout = layout
        
        adapter = IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
        adapter.collectionView = collectionView
        adapter.dataSource = ProfileAdapter(users: users)
    }
    
    // 데이터를 가져와서 users 배열에 추가한 뒤, adapter.reloadData()로 리스트 업데이트
}

이제 IGListKit을 사용하여 셀 내부에 데이터 모델을 연동하는 방법에 대해 배웠습니다. IGListKit은 강력한 리스트 관리 도구로서 많은 기능과 유연성을 제공합니다. IGListKit을 사용하여 대규모 리스트 인터페이스를 구축해보세요!

더 자세한 내용은 IGListKit 공식 문서를 참고하십시오.