[iOS] Diffable DataSource, SnapShot, Compositional Layout

1️⃣ UICollectionView의 Data, Presentation 이슈

- 기존 UICollectionView의 구현방법을 살펴보면, Controller가 데이터를 받아와서 UI에게 변경을 알린다.

- 여기서, Controller와 UI가 가지고 있는 데이터가 서로 다른 이슈가 생길 수 있다. → 앱에서는 어느 데이터가 맞는건지 확인하기 어려움

 

 

Single Source Of Truth Data의 필요성 증가

- 이 이슈의 근본적인 문제 해결 방식은 참인 데이터를 하나만 두도록 하는 것이다. → Single Source Of Truth

- 그래서 제안된 방법 Diffable DataSource

 

 

Diffable DataSource ?

Diffable DataSource는 Data Source와 달리, 데이터가 달라진 부분을 추적하여 자연스럽게 UI를 업데이트 한다.

이전과 달라진 부분은 자동으로 알아차리고, 새로운 부분만 다시 그려져 단순 업데이트가 가능하다.

 

 

Diffable DataSource의 장점

- 충돌, 예외처리 상황을 피할 수 있고

- 동기적인 부분보다는 앱의 동적인 데이터와 내용에 집중할 수 있다.

- identifier와 snapshot을 사용하는 간소화 된 Data 모델을 정의하고, 이를 이용하여 UI를 업데이트한다.

 

 

SnapShot?

- 한가지 참인 데이터를 관리하는 객체

- indexPath를 쓰지 않고, 섹션 및 아이템에 대해서 Unique ID를 사용한다. → Unique + Hashable

 

 

아이템 구현의 예

struct MyModel: Hashable {
	let identifier = UUID()
    func hash(into hasher: inout Hasher) {
    	hasher.combine(identifier)
    }
    static func == (lhs: MyModel, rhs: MyModel) -> Bool {
    	return lhs.identifier == rhs.identifier
    }
}

 

 

 

 

2️⃣ UICollectionView의 Layout 이슈

- 기존의 UICollectionViewFlowLayout 은 대부분의 단순 디자인에서는 좋은 역할

- 그치만, 점점 더 복잡한 디자인에서는 CustomLayout을 그때마다 구현해주어야하는 문제점이 있음

 

 

Layout 이슈의 해결로 Compositional Layout이 등장

Compositional Layout

let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension .absolute(44.0))
let item = NSCollectionLayoutItem(layoutSize: size)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
let layout = UICollectionViewCompositionalLayout(section: section)

 

 

---

📌 정리,

1️⃣ 기존 UICollectionView의 Data, Presentation 이슈

UICollectionViewDataSource → UICollectionViewDiffableDataSource

 

- Presentation : DiffableDataSource

- Data : SnapShot

 

2️⃣ 기존 UICollectionView의 Layout 이슈

UICollectionViewFlowLayout → UICollectionViewCompositionalLayout

 

 

---

Reference

• https://developer.apple.com/videos/play/wwdc2019/220/
• https://developer.apple.com/videos/play/wwdc2019/215/
• 패스트캠퍼스