[트러블 슈팅] DiffableDataSource 컬렉션 뷰에 다양한 데이터모델을 사용하기

😐 문제 배경

프로젝트 진행중에 CollecionView를 중복으로 사용하면서 발생하였습니다.

검색 페이지	예매내역 더보기 페이지	찜 목록 더보기 페이지

 

위 3개의 View는 모두 다른 ViewController입니다.

그리고 안에 있는 컬렉션 뷰는 각 VC에 생성 및 구성작업을 했습니다.

구현하고 보니, 컬렉션뷰의 디자인이 동일한데 각 VC에서 생성하다보니 중복되는 느낌을 받았고, VC에 코드줄이 길어지면서 가독성도 떨어지게 되었습니다.

-> 그래서 이를 하나의 컬렉션 뷰로 파일 분리하여 구성한 다음 재사용하면 VC가 더 간결해지겠다고 생각했습니다!

 

🤔 상황

재사용 하기전에 각 컬렉션 뷰의 공통점이 있는지 파악을 먼저 했습니다.

1. 3개의 컬렉션 뷰 모두 DiffableDataSource를 사용했습니다.

2. 3개의 컬렉션 뷰의 셀 레이아웃 구성이 같습니다.

3. 3개의 컬렉션 뷰 셀은 모두 이미지뷰 하나로 이루어져있습니다.

4. 3개의 컬렉션 뷰 모두 API호출을 통해 데이터를 받아옵니다.

 

 

그리고 구현할 때 분기점을 구성하기 위해 차이점도 생각했습니다.

- 검색페이지와 찜 목록 더보기 페이지의 데이터모델은 MovieEntity를 사용합니다.

- 예매내역 더보기 페이지는 Reservation 데이터모델을 사용합니다.

- UseCase와 Repository가 각각 존재합니다.

 

종합하자면 3개의 컬렉션 뷰의 UI 구성은 모두 같지만, 셀 구성시 데이터모델에서 차이점과 UseCase, Repository가 다르다는 점입니다.

 

😎 해결 아이디어 1: 데이터모델을 통합하자

데이터모델만 차이가 있으므로 데이터모델을 통합하는 방법이 먼저 떠올랐습니다.

// 영화검색 페이지, 찜목록 더보기 페이지의 데이터모델
struct MovieEntity: Hashable {
    let movieID: Int                // 영화 ID
    let title: String               // 영화 제목
    let genre: [String]             // 장르
    let director: String            // 영화 감독
    let actors: [String]            // 출연 배우 (3명)
    let releaseDate: String         // 영화 개봉일
    let runtime: Int                // 상영시간
    let voteAverage: Double         // 평점(소수점 두자리만 사용)
    let voteCount: Int              // 평가 인원 수
    let overview: String            // 줄거리
    let posterImageURL: String      // 포스터 이미지 URL
    let certification: String       // 관람 등급
}
// 예매내역 더보기 데이터모델
struct Reservation: Hashable {
    let reservationID: String
    let genre: [String]
    let member: Int
    let posterURL: String
    let reservationTime: String
    let title: String
}

 

두 개의 데이터모델을 통합하고 DiffableDataSource를 정의하면 되겠다라고 생각이 들었지만...

프로젝트의 가장 안쪽의 레이어인 모델을 변경하면 UseCase와 Respository의 메서드들을 모두 변경해야 하는 단점을 알게 되었습니다.

 

또한 사용하지 않는 데이터도 저장된다는 단점이 있습니다.

예를 들어 예매내역에서는 overview(줄거리), certification(관람등급) 항목들은 필요가 없어서 데이터공간을 차지하게 됩니다.

예매내역 데이터가 파이어베이스에 저장된 모습	찜 목록 데이터가 파이어베이스에 저장된 모습

해당 방법은 틀리고 작동이 안되는 아이디어는 아니지만,

많은 코드를 변경해야한다는 점과 데이터 공간을 절약하기 위하여 해당 아이디어를 사용하지 않았습니다.

 

 

😎 해결 아이디어 2: 다양한 데이터모델을 받도록 DiffableDataSource를 정의하자

이 글의 핵심내용이 여기서 나오는데요. 

DiffableDataSource를 정의할 때 다양한 데이터모델을 받도록하여 컬렉션 뷰의 재사용성을 늘리는 방법입니다.

이는 각 VC의 UseCase와 Repository를 그대로 유지하면서 데이터모델만 유연하게 받도록 하여 1번의 아이디어보다 적게 코드를 수정할 수 있고, 이미 구현된 데이터모델을 사용하므로 필요한 데이터만 저장하고 사용하도록 구현할 수 있다고 판단했습니다.

 

// 데이터모델을 열거형으로 구현
enum ItemWrapper: Hashable {
    case movieEntity(MovieEntity)
    case reservationEntity(Reservation)
}

typealias DataSource = UICollectionViewDiffableDataSource<Section, ItemWrapper>
typealias SnapShot = NSDiffableDataSourceSnapshot<Section, ItemWrapper>

// 셀 등록 정의
let cellRegistration = UICollectionView.CellRegistration<MovieItemCollectionViewCell, [ItemWrapper]> { cell,indexPath,itemIdentifier in }

// 셀 구성할 때 분기점을 생성하여 해당 셀을 configure하도록 수정
movieItemCollectionDataSource = DataSource(collectionView: self) { collectionView, indexPath, item in
    let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: [item])
    switch item {
    case .movieEntity(let movieEntity):
        cell.configure(model: movieEntity)
    case .reservationEntity(let reservationEntity):
        cell.configure(model: reservationEntity)
    }
    return cell
}

// Item 스냅샷 생성
private func makeSnapShot(item: [CellConfigurable]) -> SnapShot {
    var snapshot = SnapShot()
    snapshot.appendSections([.main])
    if item is [MovieEntity] {
        snapshot.appendItems(item.map{ItemWrapper.movieEntity($0 as! MovieEntity)})
    }
    if item is [Reservation] {
        snapshot.appendItems(item.map{ItemWrapper.reservationEntity($0 as! Reservation)})
    }
    
    return snapshot
}

 

또한 커스텀 셀의 configure메서드에서 매개변수로 각 데이터모델을 받던걸 여러개의 데이터모델을 받도록 하기 위해 프로토콜을 생성하고 데이터모델들이 채택하게 수정하였습니다.

매개변수에는 해당 프로토콜을 채택하는 데이터모델이 들어오도록 수정하였습니다.

// 데이터모델의 공통 타입을 매개변수로 전달하기 위해 프로토콜 생성
protocol CellConfigurable { }
// 프로토콜 채택
extension MovieEntity: CellConfigurable { }
extension Reservation: CellConfigurable { }

// CustomCell의 configure 메서드
func configure(model: CellConfigurable) {
    if let model = model as? MovieEntity {
        // 예매내역 UI 구성
    }
    if let model = model as? Reservation {
        // 찜목록 UI 구성
    }
}