[UIKit] TableView Multiple Cell, multi type json data parsing

 

---

 

TableView는 하나의 Cell이 아닌 다양한 Cell을 가질 수 있습니다.

종종 앱을 보다보면 tableview 중간중간 광고가 나온다거나, 나를 위한 추천을 한다거나 ...

대부분의 앱 서비스가 tableview를 사용하고, multiple cell을 사용합니다.

그래서 저도 multiple cell을 사용하여 다음과 같은 앱을 만들어 볼것입니다!

 

데이터 가져오기

먼저 멀티타입 데이터를 어떻게 가져올 것인지에 대해 고민해야합니다.

(JSON에 대한 내용은 접은글에 있습니다)

let JSONData =
"""
{
    "data" : [
        {
            "type" : "TITLE_ONLY",
            "title" : "Struct vs Class"
        },
        {
            "type" : "IMAGE_ONLY",
            "imageURL" : "https://picsum.photos/200"
        },
        {
            "type" : "CONTENT_WITH_TITLE",
            "title" : "struct 특징",
            "content" : "값타입, protocol채택 가능, 상속 불가능"
        },
        {
            "type" : "CONTENT_WITH_TITLE",
            "title" : "class 특징",
            "content" : "참조타입, protocol채택 가능, 상속 가능"
        },
        {
            "type" : "IMAGE_ONLY",
            "imageURL" : "https://picsum.photos/200"
        },
        {
            "type" : "TITLE_ONLY",
            "title" : "Collection"
        },
        {
            "type" : "CONTENT_WITH_TITLE",
            "title" : "Array",
            "content" : "배열을 쓰면 ramdom access가능함"
        },
        {
            "type" : "CONTENT_WITH_TITLE",
            "title" : "Set",
            "content" : "중복이 싫은 사람 Set을 써보자"
        },
        {
            "type" : "CONTENT_WITH_TITLE",
            "title" : "Dictonary",
            "content" : "key-value로 데이터를 저장할 수 있단다"
        },
        {
            "type" : "IMAGE_ONLY",
            "imageURL" : "https://picsum.photos/200"
        }
    ]
}
""".data(using: .utf8)!

 

 

먼저 배열은 오로지 하나의 타입만 허용하기 때문에 CellType이라는 데이터 타입을 가지도록 하겠습니다.

struct CellData : Decodable {
    let data : [CellType]
}

 

여기서 가장 주목해야할 점은 배열안에 들어 있는 데이터의 모양이 조금씩 다르다는 것입니다.

이 전에 작성했던 글의 BaseNetworkManager는 JSON파싱을 하기전에 데이터 타입을 결정합니다.

그렇기 때문에 request할 때 데이터 타입을 알고 있어야 합니다.

https://990427.tistory.com/117

[Swift] 재사용 가능한 NetworkManager만들기 (feat. Generic)

 

 

그래서 multi type을 가진 배열의 경우 위의 방법으로 파싱이 불가능합니다.

제일 쉬운방법은 각각의 데이터가 조금씩 다르지만, type만은 일치하므로 type을 제외한 나머지 프로퍼티를 옵셔널 처리 해주는 것입니다.

struct CellType: Decodable {
    let type: String
    let title: String?
    let content: String?
    let imageURL: String?
}

 

물론 이렇게 구현할 수 있습니다!

하지만, 각각의 cell데이터들이 있지도 않은 프로퍼티를 옵셔널 타입으로 가지게 되므로 단일 책임 원칙이 위배되는것 같습니다.

지금은 프로퍼티의 양이 작지만, cell의 타입이 늘어나게되면 프로퍼티가 많아지면서 복잡하고 가독성을 해치게 됩니다.

 

그래서 각각의 cell type에 맞는 데이터를 분리 했습니다.

struct TitleOnly: Decodable{
    let type: String
    let title: String
}

struct ImageOnly: Decodable{
    let type: String
    let imageURL: String
}

struct ContentWithTitle: Decodable{
    let type: String
    let title: String
    let content: String
}

 

여기서 CellType을 어떻게 작성해야 이 구조체를 모두 품을 수 있을까?

 

이 고민에 대한 결론은 CellType을 enum으로 작성하는 것입니다.

enum은 연관값을 가질 수 있다는 특성이 있습니다. 이 연관값에 parsing할 구조체를 넣어주어 CellType을 구현하면 모든 구조체를 품을 수 있습니다.

enum CellType: Decodable {
    case TitleOnlyType(TitleOnly)
    case ImageOnlyType(ImageOnly)
    case ContentWithTitleType(ContentWithTitle)
}

 

데이터를 파싱했을 때 각각의 case에 맞는 데이터를 넣어주기 위해 이니셜라이저를 작성합니다.

    enum CodingKeys: String, CodingKey {
        case type
    }
    
    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        let type = try container.decode(String.self, forKey: .type)
        
        switch type {
        case "TITLE_ONLY":
            self = .TitleOnlyType(try decoder.singleValueContainer().decode(TitleOnly.self))
        case "IMAGE_ONLY":
            self = .ImageOnlyType(try decoder.singleValueContainer().decode(ImageOnly.self))
        case "CONTENT_WITH_TITLE":
            self = .ContentWithTitleType(try decoder.singleValueContainer().decode(ContentWithTitle.self))
        default:
            throw DecodingError.dataCorruptedError(forKey: .type, in: container, debugDescription: "Invalid type: \(type)")
        }
    }

 

만약 다른 cell이 추가 된다면 cell type에 맞는 구조체를 만들어 CellType의 case를 추가해주면 됩니다.

 

이니셜라이저에 CodingKey로 type을 사용한 이유는, type이라는 key값이 모든 cell data에 해당하기 때문입니다.

이 type값을 통해 case를 구분지을 수 있습니다.

 

CellType에서 어떤 case를 저장할지 결정하기 때문에, json을 parsing할 때 다음과 같이 작성해주면 됩니다.

var cellData = [CellType]()

func fetchData(){
    do {
        let decodedData = try JSONDecoder().decode(CellData.self, from: JSONData)
        cellData = decodedData.data
    } catch {
        print("JSON 파싱 오류: \(error)")
    }
}

 

 

TableView 적용하기

그럼 이제 TableView에 멀티 뷰 타입을 적용해 보겠습니다!

우선 각각의 type에 맞는 Cell 세개를 만들어줍니다.

(UI코드는 생략)

class TitleOnlyCell : UITableViewCell {
    static let ID = "TitleOnlyCell"
    var titleLabel = UILabel()
    
    /// 생략...
    
    func bind(_ data: TitleOnly) {
        titleLabel.text = data.title
    }
    override func prepareForReuse() {
        titleLabel.text = nil
    }
}


class ImageOnlyCell : UITableViewCell {
    static let ID = "ImageOnlyCell"
    var image = UIImageView()
    
    /// 생략...
    
    func bind(_ data: ImageOnly){
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: URL(string: data.imageURL)!) {
                DispatchQueue.main.async {
                    self?.image.image = UIImage(data: data)
                }
            }
        }
    }
    
    override func prepareForReuse() {
        image.image = nil
    }
}


class ContentWithTitleCell : UITableViewCell {
    static let ID = "ContentWithTitleCell"
    var titleLabel = UILabel()
    var contentLabel = UILabel()
    
    /// 생략...
    
    func bind(_ data: ContentWithTitle){
        titleLabel.text = data.title
        contentLabel.text = data.content
    }
    
    override func prepareForReuse() {
        titleLabel.text = nil
        contentLabel.text = nil
    }
}

 

그리고 tableView에 등록해줍니다.

        tableView.register(TitleOnlyCell.classForCoder(), forCellReuseIdentifier: TitleOnlyCell.ID)
        tableView.register(ImageOnlyCell.classForCoder(), forCellReuseIdentifier: ImageOnlyCell.ID)
        tableView.register(ContentWithTitleCell.classForCoder(), forCellReuseIdentifier: ContentWithTitleCell.ID)

 

이제 어떤 cell을 선택할 것인가 결정해야 합니다.

tableView가 사용할 데이터인 cellData를 읽어, 해당 데이터의 case에 따라 보여줄 cell을 결정합니다.

extension ViewController : UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        switch cellData[indexPath.row] {
        case .TitleOnlyType(let data):
            let cell = tableView.dequeueReusableCell(withIdentifier: TitleOnlyCell.ID) as! TitleOnlyCell
            cell.bind(data)
            return cell
        case .ImageOnlyType(let data):
            let cell = tableView.dequeueReusableCell(withIdentifier: ImageOnlyCell.ID) as! ImageOnlyCell
            cell.bind(data)
            return cell
        case .ContentWithTitleType(let data):
            let cell = tableView.dequeueReusableCell(withIdentifier: ContentWithTitleCell.ID) as! ContentWithTitleCell
            cell.bind(data)
            return cell
        }
    }
}

 

끝입니다!

 

 

 

Multiple Cell이 가지는 장점

cell type을 다양하게 만들어두면, 서버의 데이터에 의해 보여지는 화면이 달라질 수 있습니다.

이를 server driven UI라고 합니다.

모바일 앱은 유저가 업데이트 버튼을 눌러야만 수정이 가능하다는 제약이 있습니다.

server driven UI를 사용하면 서버에 의해 UI가 바뀌기 때문에 업데이트 없이도 화면이 달라질 수 있습니다.

즉, multiple cell을 잘 사용하면 모바일 앱의 제약사항을 어느정도 해소할 수 있습니다 ㅎㅎ!