UICollectionViewDiffableDataSource와 NSDiffableDataSourceSnapshot

UICollectionViewDiffableDataSource란

컬렉션 뷰에서 데이터를 관리하고 셀을 제공하기 위해 사용하는 객체

Overview

DiffableDataSource는 컬렉션 뷰 객체와 함께 하는 데이터 소스의 특수한 타입입니다. 이 객체는 컬렉션 뷰의 데이터와 UI에 대한 업데이트를 관리하는 데 필요한 동작을 간단하고 효율적인 방법으로 제공합니다. 이 객체는 UICollectionViewDataSource 프로토콜을 따르기도 하며, 프로토콜의 모든 메소드에 대한 구현도 제공합니다.

컬렉션 뷰를 데이터로 채우려면 아래처럼 해야 합니다.

1. 디퍼블 데이터 소스와 컬렉션 뷰를 연결합니다.
2. 컬렉션 뷰의 셀을 설정하기 위해 셀 제공자를 구현합니다.
3. 데이터의 현재 상태를 생성합니다.
4. UI에서 데이터를 표시합니다.

디퍼블 데이터 소스를 컬렉션 뷰에 연결하려면, 연결하길 원하는 컬렉션 뷰를 전달하면서 디퍼블 데이터 소스의 init(collectionView:cellProvider:) 이니셜라이저를 사용해 디퍼블 데이터 소스를 생성해야 합니다. UI에서 데이터를 어떻게 표시할지 결정하기 위해 각각의 셀을 설정하는 곳으로 셀 제공자 역시 전달해야 합니다.

dataSource = UICollectionViewDiffableDataSource<Int, UUID>(collectionView: collectionView) {
    (collectionView: UICollectionView, indexPath: IndexPath, itemIdentifier: UUID) -> UICollectionViewCell? in
    // configure and return cell
}

다음으로 데이터의 현재 상태를 생성할 수 있고, 스냅샷을 구성하고 적용하는 것을 통해 UI에 데이터를 표시할 수 있습니다. 이에 대한 더 많은 정보는 NSDiffableDataSourceSnapshot을 보시기 바랍니다.

NSDiffableDataSourceSnapshot
https://developer.apple.com/documentation/uikit/nsdiffabledatasourcesnapshot
https://velog.io/@panther222128/UITableViewDiffableDataSourceReference

Important
dataSource를 디퍼블 데이터 소스로 설정한 후 컬렉션 뷰에서 dataSource를 변경하지 않아야 합니다. 컬렉션 뷰에서 초기 데이터 소스 설정 후 새로운 데이터 소스가 필요한 경우 새로운 컬렉션 뷰와 디퍼블 데이터 소스를 생성 및 설정해야 합니다.

NSDiffableDataSourceSnapshot

특정 시점에서 뷰에 있는 데이터 상태의 표현

Overview

DiffableDataSource는 컬렉션 뷰 및 테이블 뷰에서 데이터를 제공하기 위해 스냅샷을 사용합니다. 스냅샷을 통해 뷰에서 표시하는 데이터의 초기 상태를 설정할 수 있으며, 이후 해당 데이터를 업데이트할 수도 있습니다.

스냅샷에 있는 데이터는 표시하고자 하는 섹션 및 아이템으로 만들어지며, 표시하길 원하는 순서로 나타납니다. 섹션 및 아이템을 추가, 삭제, 이동시켜서 표시하고자 하는 것을 설정할 수 있습니다.

Important
섹션 및 아이템의 각각은 Hashable 프로토콜을 따르는 고유한 identifier를 가져야 합니다.

snapshot 사용법
1. 표시하고자 하는 데이터의 상태와 함께 스냅샷을 생성하고 채워야 합니다.
2. UI에 변경사항을 반영하기 위해 스냅샷을 적용해야 합니다.

// Create a snapshot.
var snapshot = NSDiffableDataSourceSnapshot<Int, UUID>()        

// Populate the snapshot.
snapshot.appendSections([0])
snapshot.appendItems([UUID(), UUID(), UUID()])

// Apply the snapshot.
dataSource.apply(snapshot, animatingDifferences: true)