[swift] IGListDiffKit과 함께하는 웹뷰 구현

20 Nov 2023

swift

이번 포스트에서는 IGListDiffKit을 사용하여 웹뷰를 구현하는 방법에 대해 알아보겠습니다.

IGListDiffKit이란?

IGListDiffKit은 Instagram에서 개발한 오픈 소스 라이브러리로, 리스트 기반의 인터페이스를 쉽게 구현할 수 있도록 도와줍니다. 이 라이브러리를 사용하면 리스트의 변경 사항을 감지하고 효율적으로 업데이트할 수 있습니다.

웹뷰 구현하기

먼저, IGListDiffKit을 프로젝트에 추가해야 합니다. CocoaPods를 사용한다면 Podfile에 다음과 같이 추가합니다.

pod 'IGListDiffKit'

다음으로, 웹뷰를 표시할 뷰 컨트롤러를 만들고 IGListDiffable 프로토콜을 채택합니다.

import UIKit
import WebKit
import IGListDiffKit

class WebViewController: UIViewController {

    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        setupWebView()
    }

    private func setupWebView() {
        webView = WKWebView(frame: view.bounds)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // 웹뷰 콘텐츠 로드
        let url = URL(string: "https://example.com")
        let request = URLRequest(url: url!)
        webView.load(request)
    }
}

extension WebViewController: WKNavigationDelegate {

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 웹뷰 로딩 완료 후, 로딩된 컨텐츠 업데이트
        let updatedContent = webView.scrollView.contentSize

        // IGListDiffKit 이용하여 리스트 업데이트
        let diff = IGListDiff(fromInitialState: nil, toFinalState: updatedContent, objectDiffBlock: { (from, to) -> Bool in
            return from != to
        })

        // diff 결과를 이용하여 UI 업데이트
        if let result = diff?.forBatchUpdates() {
            collectionView.performBatchUpdates({
                result.delete.forEach({ index in
                    collectionView.deleteItems(at: [IndexPath(item: index, section: 0)])
                })

                result.insert.forEach({ index in
                    collectionView.insertItems(at: [IndexPath(item: index, section: 0)])
                })

                result.update.forEach({ index in
                    collectionView.reloadItems(at: [IndexPath(item: index, section: 0)])
                })

            }, completion: nil)
        }
    }
}

위의 코드에서는 웹뷰가 로딩을 완료하고 나서 IGListDiffKit을 사용하여 리스트의 변경 사항을 감지하고 UI를 업데이트합니다. IGListDiffKit의 IGListDiff 객체를 생성할 때, 새로운 컨텐츠와 이전 컨텐츠를 비교하는 커스텀 비교 블록을 사용합니다.

이제 웹뷰가 업데이트될 때마다 변경된 부분만 적용되는 웹뷰를 구현할 수 있게 되었습니다.

마무리

IGListDiffKit은 목록 기반의 인터페이스를 구현할 때 매우 강력하고 유용한 도구입니다. 이번 포스트에서는 IGListDiffKit을 사용하여 웹뷰를 효율적으로 구현하는 방법을 알아보았습니다. IGListDiffKit은 다양한 기능과 유연성을 제공하므로, 프로젝트에서 활용해 보시기 바랍니다.

IGListDiffKit이란?

웹뷰 구현하기

마무리

참고 자료