Modern UIKit Collection, TableView #1

WWDC 19) Advances in UI Data Sources

Advances in UI Data Sources - WWDC19 - Videos - Apple Developer

💡
- UI Diffable DataSource를 사용하면 automatic diffing(자동 비교)를 사용하여 CollectionView, TableView 업데이트(reload)를 간소화할 수 있습니다.
- 세트(셀 데이터) 변경에 대한 고품질 애니메이션이 자동으로 제공되며 추가 코드가 필요하지 않습니다!
- 이 개선된 메커니즘은 동기화 버그, 예외 및 충돌을 완전히 방지합니다!
- Identifier 및 SnapShot을 사용하는 이 간소화된 Diffable DataSource를 통해 개발자는 UI 데이터 동기화에 관한 세밀한 부분 대신 앱의 동적 데이터와 콘텐츠 부분에 집중할 수 있습니다.

기존 방식의 문제점

1. UI와 Controller 사이 데이터 업데이트와 뷰간의 시간 차이 발생 시 이에 대한 처리의 어려움

💡 뷰 초기화시 UI(테이블 뷰, 콜렉션 뷰) 영역이 셀 아이템의 개수를 묻지만 컨트롤러는 웹에서 데이터를 받아오는 중…
- 나중에 UI에 데이터 값이 바뀜을 알려줘야함

1. 실시간 업데이트 사이에 셀과 섹션의 View에서의 삭제, 생성의 동적인 변화 대응 어려움

실시간 와이파이 탐색하는 테이블 뷰를 기존의 방식으로 보여주기는 너무 복잡해진다..!

DiffableDataSource

UI State(테이블 뷰, 콜렉션 뷰 아이템 데이터)에 대한 선언형(Declarative)적인 접근

Diffable Data Source 유형

• UICollectionViewDiffableDataSource ⇒ 콜렉션 뷰 대응
• UITableViewDiffableDataSource ⇒ 테이블 뷰 대응
• NSCollectionViewDiffableDataSource ⇒ 맥에 존재하는 리스트 표시 유형

Order of use) 사용 규칙 혹은 순서

1. diffable 데이터 소스를 컬렉션 뷰에 연결하세요.
   ⇒ diffable datasource 인스턴스 생성하기
2. 셀 공급자에 대한 구현
   ⇒ 셀 등록하기
3. 데이터의 현재 상태를 생성
   ⇒ 이미 존재하는 데이터에서 가져옴
4. UI에 데이터를 표시합니다.
   ⇒ datasource에 현재 데이터의 상태를 적용시킴

Snapshots

• 클래스: NSDiffableDataSourceSnapshot
• 현재 UI State에 대한 순간적인 값
• 섹션과 그 하위의 아이템들을 Unique identifiers로 구분함
  ⇒ 각각의 데이터는 Identifiable 프로토콜을 지켜야한다는 뜻
• 각각의 셀 데이터를 IndexPaths로 직접 접근해서 뷰에 표시할 필요가 없음

현재의 값들을 갖고 있는 DiffableDataSource에 존재하는 스냅샷에서 새로운 스냅샷을 적용(apply)하는 방식으로 업데이트 한다.

⇒ dataSource에 apply함수에 snapshot 인스턴스를 넣으면 그 데이터에 맞는 셀 뷰를 보여준다.
⇒ dataSource.apply(snapshot,animating: false)

---

Required) 사용하기 위해 준수해야하는 사항

• Section으로 사용할 타입과 Item으로 사용할 타입을 설정한다.
  • 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 } }
  • ❗이런 타입은 Hashable 프로토콜을 준수해야한다.
• 기존 DataSource 바인딩 기법은 사용하지 않는다
  • self.tableView.dataSource = self ← 이거 안됨!!
• CollectionView, TableView에 셀을 표시할 셀 아이템을 미리 등록시켜 놓는다.
• Snapshot apply는 main queue, background queue 둘 다 적용하지만, 하나의 데이터 소스에는 하나의 큐에서만 apply 할 것

간단한 테이블 뷰에 적용하기

💡 모든 현대적인 기법을 적용한 것이 아닌 데이터 소스의 일부 기법만 적용함..!
- 테이블 뷰 셀 선택시 기존에 셀에 존재한 글의 전체를 볼 수 있게 만든 코드

테이블 뷰 셀 코드

import UIKit
import SnapKit
class CustomTableViewCell: UITableViewCell {
    let label = UILabel()
    let button = UIButton()
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configure()
        setConstraints()
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    func configure(){ // 셀에 configure시 주의사항
        self.contentView.addSubview(label)
        self.contentView.addSubview(button)
        self.contentView.backgroundColor = .yellow
        label.font = .monospacedDigitSystemFont(ofSize: 17, weight: .medium)
        let config = UIButton.Configuration.filled()
        button.configuration = config
    }
    func setConstraints(){
        button.snp.makeConstraints { make in
            make.width.equalTo(80)
            make.trailingMargin.equalTo(contentView)
            make.top.equalTo(contentView).offset(4)
        }
        label.snp.makeConstraints { make in
            make.verticalEdges.equalTo(contentView).inset(16)
            make.top.leadingMargin.equalTo(contentView)
            make.trailing.equalTo(button.snp.leading).offset(-8)
        }
    }
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

테이블 뷰 코드

import UIKit
import SnapKit

struct Sample: Identifiable,Hashable{ // 테이블 뷰 아이템
    let id = UUID()
    let text: String
    var isExpand: Bool
}

class CustomTableVC: UIViewController{
    let tableView = UITableView()
    enum Section{ case main } // 테이블 뷰 섹션... 사실 필요 없지만 데이터 소스에 필요해서 간단하게 만듬
    var dataSource: UITableViewDiffableDataSource<Section,Sample>?
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(tableView)
        self.view.backgroundColor = .white
        tableView.snp.makeConstraints { $0.edges.equalTo(view.safeAreaLayoutGuide) }
        configureTableView()
    }
}
extension CustomTableVC{
    func configureTableView(){
        tableView.rowHeight = UITableView.automaticDimension
        tableView.separatorStyle = .none
        tableView.delegate = self // 테이블 뷰의 delegate 추가하기
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "customCell") // 테이블 뷰에 보여줄 셀 등록하기
        /// 테이블 뷰가 따라야할 데이터 소스에 대한 선언, 기존 데이터 소스의 cellForRowAt과 비슷함
        /// 제네릭에서 섹션에 타입과 아이템의 타입을 미리 알려줘야함,
        /// 후행 클로져에서 테이블 뷰, indexPath, 앞에서 선언한 아이템에 구조체에 대한 인스턴스를 반환함
        /// 특정 순서에 아이템에 대한 정보를 클로져에서 알고 있다는게 기존의 cellForRowAt과 다름!!
        self.dataSource = UITableViewDiffableDataSource<Section,Sample>(tableView: tableView) { tableView, indexPath, item in
            guard let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as? CustomTableViewCell else {return .init()}
            cell.label.text = item.text
            cell.label.numberOfLines = item.isExpand ? 0 : 2
            cell.button.setTitle("\(indexPath.row) 하이", for: .normal)
            return cell
        }
        // 초기에 생성할 스냅샷 -> 이 스냅샷을 데이터 소스에 적용시킴
        var snapShot = NSDiffableDataSourceSnapshot<Section, Sample>()
        snapShot.appendSections([.main]) // 섹션 추가하기
        // 임시 셀 아이템 데이터를 만들기
        let samples:[Sample] = (0...30).map { val in Sample(text: "오랜만에 공지로 돌아왔습니다.\n\n가족여행 잘 다녀왔습니다.\n\n잘 지내셨나요? 시청자: 네 잘 지냈습니다.\n\n그렇군요. 앞으로도 잘 지내십시오.\n\n재밌는 손님을 많이 모십니다. 기대해 주세요. 월요일날 만나요~", isExpand: false)}
        snapShot.appendItems(samples)
        self.dataSource?.apply(snapShot)
    }
}
extension CustomTableVC:UITableViewDelegate{
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        /// 1. 기존에 데이터 소스에 선택한 indexPath의 데이터(아이템)를 가져옴
        /// 2. 현재 데이터 소스의 스냅샷에서 데이터(아이템)들 배열을 가져옴 (구조체 리스트)
        /// 3. 아이템 배열 중에 선택한 아이템의 순서를 알아냄
        guard let item = dataSource?.itemIdentifier(for: indexPath),
              var snapshotItems:[Sample] = dataSource?.snapshot().itemIdentifiers,
              let idx = snapshotItems.firstIndex(of: item) else {return}
        snapshotItems[idx].isExpand.toggle() // 이 아이템에서 바뀔 데이터
        // 새로운 스냅샷 생성하기
        var snapsot = NSDiffableDataSourceSnapshot<Section, Sample>()
        snapsot.appendSections([.main])
        snapsot.appendItems(snapshotItems)
        // 데이터 소스에 새로운 스냅샷 적용, 이전 스냅샷과 다른 점이 있다면 애니메이션 실행
        dataSource?.apply(snapsot,animatingDifferences: true)
    }
}