[Swift] 그릇 세팅하면서 배우는 테이블 뷰(Table View)

지난번에는 프로토콜과 델리게이트의 개념을 간단히 이해 보았습니다ㅎㅎ(카페 사장님이 Protocol 프로토콜로 Delegate 델리게이트 하는 법)

[Swift] 카페 사장님이 Protocol 프로토콜로 Delegate 델리게이트 하는 법

오늘은 그 델리게이트와 프로토콜에 대한 개념이 자주 쓰기게 될 테이블 뷰 Table View에 대해 알아보려고 합니다.

테이블 뷰는 iOS에서 가장 많이 쓰이는 UIView중에 하나로 iOS 기본 앱들만 봐도 거의 대부분의 앱에서 테이블 뷰를 사용하고 있어요.

 

대부분의 앱에서 사용되는 테이블 뷰!

 

오케이 테이블 뷰 많이 쓰이는거 알겠고, 그러면 어떻게 만들어야 하나요!?? 하실텐데

 

테이블 뷰를 만들기 위해서는 UITableViewDataSource 와 UITableViewDelegate 프로토콜을 

아래와 같이 적용해서 어쩌구 저쩌구............. 

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet weak var tableView: UITableView!

하고 바로 코드만 보여주면 재미가 없잖아요? 그죠?ㅎㅎㅎ

다양하고 자세한 테이블 뷰 튜토리얼들은 많으니 이번 글에서는 지난번 프로토콜과 델리게이트 글에서 처럼 비유를 통해 개념을 이해볼께요~

 

자 테이블 뷰를 그냥 그릇을 놓는 테이블(식탁) 이라고 생각해보자고요

 

???: 아니 그 테이블이 그 테이블이 아니잖아!!??

ㅋㅋㅋㅋㅋㅋ알아요 알아요 비유니까 일단 들어보세요

 

저와 친구들이 행사를 주최하게 되었는데, 행사장에는 손님들을 맞이할 테이블 여러개가 있고 그 테이블들 위에는 그릇들을

잘 세팅 해 놓아야 합니다.

 

이때 테이블을 몇개를 세팅할지, 그릇들을 각 테이블당 몇개를 놓을지, 어디 그릇에 어떤 음식을 올려 놓아야 할지는 친구 '김소스'가 맡고 있고,

이 그릇을 크기가 작은 그릇을 놓을지, 큰 그릇을 놓을지, 손님이 그릇에 있는 음식을 집을때는 어떻게 해야할지(?) 같은 것들은 '박델리' 친구가 맡고 있어요

 

근데 얘네가 너무 할 일이 많고 바빠서 제가 대신 테이블 세팅 일들을 맡아서 하기로 했어요,

이때 김소스가 " 너 다른 건 다 괜찮은데  그릇들을 각 테이블당 몇개를 놓을지, 어디 그릇에 어떤 음식을 올려 놓아야 할지 는 꼭 정해 놓으라고 부탁을 해요. 그러나 박델리 따로 부탁이 없었네요!

 

자 이제 그럼 실제 테이블 뷰 함수를 위 상황에 대입해볼께요!

테이블들이 여러개 놓여져 있는 전체 공간을 UITableView, 그릇을 세팅할 각 테이블을 UITableView 위에 구간을 나눠놓은 Section 그리고 테이블 위에 있는 그릇들이 바로 Cell 이라고 대입해봐요

출처 : https://cdmana.com/2021/04/20210403192916227p.html

여기서 우리는 바로 행사 기획을 맡은 뷰 컨트롤러 FestivalViewController 인데 김소스 = UITableViewDataSource, 박델리 = UITableViewDelegate 이라는 프로토콜 친구들 대신 테이블 세팅을 맡게 된거에요.

 

이때 김소스가 특별히 부탁한 그릇들을 각 테이블당 몇개를 놓을지 = numberOfRowsInSection, 어디 그릇에 어떤 음식을 올려 놓아야 할지 = cellForRowAt은 정의를 안하면 에러가 나니 우선적으로 구현해줘야 해요!  (박델리는 따로 부탁한게 없어서 정의하지 않으면 에러가 나는 함수는 없어요! = 다 옵셔널 함수)

 

추가로 이 Table View를 MVC 패턴으로 본다면

김소스 = UITableViewDataSource 는 셀의 개수, 들어갈 데이터 등을 관리하는 Model,

우리가 행사를 진행하는 곳 = UITableView가 우리가 보는 View, 

박델리 = UITableViewDelegate 는 셀의 크기나, 선택된 셀에 대한 동작 등을 관리하는 Controller로 생각할 수 도 있을 것 같아요.

 

출처: https://www.tutorialspoint.com/asp.net_mvc/asp.net_mvc_pattern.htm

 

이제 코드를 보면서 알아 볼께요! 스토리 보드에서 테이블 뷰(UITableView)를 화면 위에 올려 놓고 tableView란 이름으로 IBOutlet으로 뷰 컨트롤러에 연결에 해주고 아래처럼 테이블 뷰를 사용하기 위한 코드를 작성했어요!

import UIKit

class FestivalViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
   
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self // 어이 김소스 여긴 내가 대신 맡지
        tableView.delegate = self // 어이 박델리 여긴 내가 대신 맡지
    }

    
    // 김소스 대신 하는 일 (김소스가 꼭 해달라고 부탁한 것 1)
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        return cell // 각 그릇에는 이런거를 올려 줄꺼야
    }
    
    // 김소스 대신 하는 일 (김소스가 꼭 해달라고 부탁한 것 2)
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return 10 // 한 테이블당(각 섹션당) 그릇의 개수
    }
    
    // 박델리 대신 하는 일
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
           print(indexPath.row) // 손님이 그릇위 음식을 선택할때 그 그릇이 몇번째 테이블인지 출력 해줄꺼야
       }
    // 박델리 대신 하는 일
   func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
       return 90 // 그릇의 크기는 90으로^^
   }
}

 

위 코드에서 김소스, 박델리 대신 하는일들의 함수 이름이 tableView로 같지만 인자가 cellForRowAt, numberOfRowsInSection, didSelectRowAt, heightForRowAt 등 각각 다르죠? 바로 tableView 함수가 오버로딩 된거라고 보시면 됩니다!

 

어떠신가요? 이제 테이블 그릇을 세팅하며 배우는 테이블 뷰 만들기ㅎㅎ 이제 이해가 좀 가시나요?

 

위 처럼 UITableViewDataSource는 셀의 개수 , UITableViewDelegate 프로토콜에는 UITableView를 관리할 수 있는 여러가지 함수가 있으니 각 함수의 용도와 사용 방법을 잘 알아보시고 테이블 뷰를 만들때 필요에 맞게 사용하시면 됩니다!