[swift] IGListDiffKit과 함께하는 소셜 미디어 피드 구현

20 Nov 2023

swift

이번에는 IGListDiffKit을 사용하여 소셜 미디어 피드를 구현하는 방법에 대해 알아보겠습니다. IGListDiffKit은 iOS 애플리케이션에서 복잡한 테이블 뷰와 컬렉션 뷰의 데이터 업데이트를 효율적으로 관리할 수 있도록 도와주는 라이브러리입니다.

IGListDiffKit 소개

IGListDiffKit은 Instagram에서 개발된 오픈 소스 라이브러리로, 복잡한 UI 업데이트를 처리하는 데 사용됩니다. IGListDiffKit은 데이터의 변경사항을 비교하고 변경된 항목만 업데이트함으로써 화면을 더 효율적으로 그릴 수 있습니다. 또한 IGListDiffKit은 사용하기 쉽고 유연한 API를 제공하여 개발자들이 빠르게 구현할 수 있도록 도와줍니다.

IGListDiffKit 설치

먼저 IGListDiffKit을 프로젝트에 설치해야 합니다. IGListDiffKit은 CocoaPods을 통해 쉽게 설치할 수 있습니다.

Podfile에 다음과 같이 추가합니다.

pod 'IGListDiffKit'

그리고 터미널에서 다음 명령어를 실행하여 CocoaPods를 업데이트합니다.

pod install

이제 IGListDiffKit을 사용할 준비가 되었습니다.

IGListDiffKit을 활용한 소셜 미디어 피드 구현

이제 IGListDiffKit을 사용하여 소셜 미디어 피드를 구현해보겠습니다. 예를 들어, 사용자들의 게시물 목록을 피드로 표시하는 기능을 구현해보겠습니다.

먼저 IGListDiffable 프로토콜을 준수하는 데이터 모델을 만들어야 합니다. IGListDiffable 프로토콜은 데이터 모델이 어떤 항목이 변경되었는지를 식별할 수 있도록 합니다.

class Post: NSObject, IGListDiffable {
    let postId: Int
    let username: String
    let content: String
    
    init(postId: Int, username: String, content: String) {
        self.postId = postId
        self.username = username
        self.content = content
    }
    
    func diffIdentifier() -> NSObjectProtocol {
        return postId as NSObjectProtocol
    }
    
    func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
        guard let other = object as? Post else { return false }
        return postId == other.postId && username == other.username && content == other.content
    }
}

다음으로, UICollectionView에 IGListAdapter를 추가하고 IGListAdapterDataSource를 구현해야 합니다. IGListAdapterDataSource는 데이터 모델을 반환하는 메서드를 구현해야 합니다.

class FeedViewController: UIViewController, IGListAdapterDataSource {
    
    private let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    private var posts: [Post] = []
    
    private lazy var adapter: IGListAdapter = {
        return IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupCollectionView()
        fetchPosts()
    }
    
    private func setupCollectionView() {
        collectionView.backgroundColor = .white
        // CollectionView의 레이아웃 설정
        let layout = UICollectionViewFlowLayout()
        collectionView.collectionViewLayout = layout
        // ...
        // 기타 CollectionView 관련 설정
        
        collectionView.register(PostCell.self, forCellWithReuseIdentifier: "PostCell")
        
        collectionView.delegate = adapter
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
    
    private func fetchPosts() {
        // 게시물 목록을 서버에서 가져와서 posts 배열에 저장
        // ...
        // 로딩 중인 상태를 표시하는 로직
        
        // 서버에서 데이터를 받아오면 updateData() 메서드를 호출하여 UI를 업데이트합니다.
        updateData()
    }
    
    private func updateData() {
        adapter.performUpdates(animated: true)
    }
    
    // MARK: - IGListAdapterDataSource
    
    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
        return posts
    }
    
    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
        return PostSectionController()
    }
    
    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
        return nil
    }
}

위의 코드에서 PostCell은 게시물을 표시하는 UICollectionViewCell 서브클래스이며, PostSectionController는 IGListSectionController의 서브클래스입니다.

이제 IGListDiffKit을 사용하여 소셜 미디어 피드를 구현하는 방법을 알아보았습니다. IGListDiffKit은 데이터 업데이트 관리를 효율적으로 처리하는 도구로, 복잡한 UI 구현에 유용하게 활용될 수 있습니다.