[iOS] 재사용 가능한 테이블뷰 데이터소스 만들기(Reusable TableView DataSource)

 

안녕하세요 Foma 👟 입니다!

오늘은 테이블뷰 데이터소스를 제너릭하게 만들어서 모든 뷰컨트롤러에서 간단하게 사용할 수 있는

 

방법에 대해 정리하겠습니다!

 

바로 시작할게요~

---

StoryBoard

 

스토리보드는 아래와 같이 테이블뷰 컨트롤러를 만들어주시고 셀에 이름을 표시할 레이블을 추가해줬습니다.

아래와 같이 구성되어 있습니다.

셀의 클래스 이름은 NameTableViewCell로 해주세요! ( 나중에 만들어줄거에요!)

identifier는 셀 이름과 똑같이 해주겠습니다.

---

NameTableVIewCell

 

아래와 같이 레이블을 연결해주세요.

 

import UIKit

class NameTableViewCell: UITableViewCell {

    @IBOutlet weak var name: UILabel!

}

---

TableViewDataSource

 

이제 본격적으로 재활용 가능한 데이터소스 파일을 만들어볼게요!

먼저 데이터 소스는 아래와 같이 어떤 셀인지 확인할 CellType과 Cell을 구성하는 Item을 가지고 있는 NSObject 만들어줍니다.

class TableViewDataSource<CellType,Item>:NSObject,UITableViewDataSource where CellType:UITableViewCell {

프로퍼티는 아래와 같이 셀의 아이덴티피어,아이템들, 그리고 나중에 뷰컨트롤러에 어떤 셀타입과 아이템을 가지고 있는지

 

콜백으로 알려줄 configure 클로져를 선언해줍니다.

    let identifier:String
    var items:[Item]
    let configure:(CellType,Item) -> ()

 

그 다음으론 데이터 소스를 구성할 때 반드시 필요한 numberofRowsInSection과 cellForRowAt을 작성하겠습니다.

 

아래와 같이 items의 갯수만큼 열을 반환해주고 해당 아이덴티피어를 가진 셀으로 로우를 구성해줍니다.

  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
 	 //아이템만큼 반환
        return self.items.count
    }
    
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //아이덴티피어에 따라서 셀을 구성함.
        guard let cell = tableView.dequeueReusableCell(withIdentifier: self.identifier, for: indexPath) as? CellType else { fatalError("\(self.identifier)를 확인해주세요!") }
        //현재 아이템
        let item = self.items[indexPath.row]
        //어떤 셀과 어떤 아이템인지 알려줌
        self.configure(cell,item)
        //셀을 반환
        return cell
    }

 

그리곤 만약 items이 변경될 경우 데이터 소스를 업데이트 시켜줄 updateDataSource 메소드도 만들어주세요!

 func updateDataSource(_ items:[Item]) {
        self.items = items
    }

---

TableViewController

 

이젠 데이터소스를 테이블뷰 컨트롤러에 적용해보겠습니다.

 

먼저 만들어준 데이터 소스에 현재 테이블뷰 컨트롤러에 구성할 셀과 아이템을 구성할 타입을 넣어준 뒤 선언해줍니다.

 

그리곤 names라는 이름들을 가지고 있는 아이템들을 만들어주겠습니다.

import UIKit

class TableViewController: UITableViewController {
    
    private var dataSource:TableViewDataSource<NameTableViewCell,String>!
    
    var names:[String] = ["Foma","Gran","Young"]

    override func viewDidLoad() {
        super.viewDidLoad()

아래와 같이 현재 테이블뷰 컨트롤러에  데이터 소스를 세팅하는 setTableViewDataSource를 만들어줍니다.

 

데이터소스는 위에서 선언한 데이터 소스에 현재 띄울 셀의 아이덴티피어와 아이템들을 넣어줍니다.

 

콜백으로 받은 셀과 아이템을 연결해서 이름을 띄워주도록 하겠습니다.

 

이렇게 세팅한 데이터소스를 현재 테이블뷰 데이터 소스로 설정하겠습니다.

  func setTableViewDataSource() {
        self.dataSource = TableViewDataSource(identifier: "NameTableViewCell", items: names, configure: { cell, name in
            cell.name.text = name
        })
        self.tableView.dataSource = dataSource
    }

 

뷰디드로드에 실행시키는거 잊지 말아주세요!

override func viewDidLoad() {
        super.viewDidLoad()
        setTableViewDataSource()
    }

---

실행화면

 

이렇게 실행하면 아래와 같이 정상적으로 이름들이 테이블뷰에 적용된 걸 볼 수 있습니다!

 

 

---

Update

 

TableViewController

 

그 다음 테이블뷰 컨트롤러에 아래와 같이 아이템이 수정될 때 updateDataSource 메소드에 파라미터로 바뀐 아이템들을

 

넣어 호출해줍니다.

 func addName(_ name:String) {
        self.names.append(name)
        self.dataSource.updateDataSource(names)
    }

---

오늘은 이렇게 데이터소스를 재활용해 테이블뷰에 적용하는 법에 대해서 다뤄보았는데요.

 

이렇게 미리 데이터소스를 만들어놓고 적용하니 테이블뷰 컨트롤러 코드도 짧아지고 또 어떤 셀이든 똑같은 방식으로

 

적용할 수 있고 특히 MVVM 디자인 패턴으로 구조를 짤때 아이템에 뷰모델들을 적용하기 쉬워서 너무 너무

 

유익한 정보였습니다!!

 

혹시라도 궁금하신 점이 있거나 틀린 부분이 있다면 댓글로 알려주세요!