[UIKit] UITableView의 Section에 대해 알아보자.

UITableView는 iOS 개발에서 많이 사용되는 UI 요소 중 하나이다. 데이터를 직관적이고 효율적으로 표시하는 데 매우 유용하다. 특히 섹션을 활용하면 데이터를 그룹화하여 더 명확하게 나타낼 수 있다. 저번 프로젝트(사카마카)에서 UITableView의 섹션을 활용하여 댓글과 대댓글 기능을 구현했다. 하지만, 섹션에 대한 이해가 부족하여 구현 과정에서 어려움을 겪었다. 이번 글에서는 UITableView의 섹션에 대해 다시 한번 학습하고 정리해보고자 한다. 

 

UITableView Section

✏️ Section은 UITableView에서 데이터를 그룹화하여 나누는 단위이다. 각 섹션은 하나 이상의 행(row)으로 구성되며, 섹션마다 헤더와 푸터를 가질 수 있다. 섹션을 사용하면 리스트 항목을 논리적으로 구분하여 사용자에게 더 나은 가독성과 구조를 제공할 수 있다.

 

UITableView에서 섹션을 정의하려면 UITableViewDataSource 프로토콜의 몇 가지 메소드를 구현해야한다. 

 

✅주요 메소드

func numberOfSections(in tableView: UITableView) -> Int {
    return data.count
}

1. numberOfSections(in:) : 테이블 뷰에서 섹션의 개수를 반환한다.

 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data[section].count
}

2. tableView(_:numberOfRowsInsection:) : 특정 섹션에 있는 행의 개수를 반환한다.

 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") ?? UITableViewCell(style: .default, reuseIdentifier: "cell")
    cell.textLabel?.text = data[indexPath.section][indexPath.row]
    return cell
}

3. tableView(_:cellForRowAt:) : 특정 섹션과 행에 대한 셀을 반환한다.

 

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    switch section {
    case 0:
        return "섹션1"
    case 1:
        return "섹션2"
    default:
       return nil
    }
}

4. tableView(_:titleForHeaderInSection:) : 특정 섹션의 헤더 제목을 반환한다 (선택사항)

예제

class SectionViewController: UIViewController {

    let tableView = UITableView()
    
    let data = [
        ["사과", "바나나", "오렌지"],
        ["당근", "브로콜리", "오이"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(tableView)
        
        tableView.register(TableViewCell.self, forCellReuseIdentifier: TableViewCell.id)
        tableView.frame = view.bounds
        tableView.dataSource = self
        tableView.delegate = self
    }
}

extension SectionViewController: UITableViewDelegate {
    func numberOfSections(in tableView: UITableView) -> Int {
        return data.count
    }
}

extension SectionViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data[section].count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.id, for: indexPath) as? TableViewCell else {
            return UITableViewCell()
        }
        let data = data[indexPath.section][indexPath.row]
        cell.configuration(data: data)
        return cell
    }
    
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        switch section {
        case 0:
            return "과일"
        case 1:
            return "채소"
        default:
            return nil
        }
    }
}

위는 간단한 예제 코드이다. 이 예제에서는 두 개의 섹션을 가지는 테이블 뷰를 설정한다. 첫 번째 섹션은 "과일", 두 번째 섹션은 "채소"를 표시한다.

 

 

 

Style

UITableView의 style 속성을 이용하여 테이블 뷰의 스타일을 수정할 수 있다.

let tableView: UITableView = {
    let tableView = UITableView(frame: .zero, style: .plain)
    return tableView
}()

 

1. .plain

단순한 리스트 형태의 테이블 뷰이다. 

✅ 섹션 간 구분이 명확하지 않다.

✅ 각 섹션의 헤더는 리스트 상단에 고정되지 않고 스크롤과 함께 이동한다.

✅ 기본적으로 각 셀 사이에 구분선이 있다.

 

2. grouped

섹션을 그룹으로 묶어서 표시하는 테이블 뷰이다.

✅ 섹션 간에 명확한 구분이 있다.

✅ 각 섹션은 그룹 형태로 묶여 있으며, 섹션 헤더와 푸터가 명확히 구분된다.

✅ 기본적으로 섹션 사이에 공백이 있다.

 

3. insetGrouped

.grouped와 유사하지만, 각 섹션이 테이블 뷰의 가장자리로부터 일정 거리만큼 안쪽으로 들어간 형태를 가지고 있다.

 

✅ 섹션들이 테이블 뷰의 가장자리로부터 인셋이 적용되어 안쪽으로 들어가 있다.

✅ 각 섹션은 기본적으로 둥근 모서리를 가지고 있다.

 

정리

UITableView의 섹션은 데이터를 그룹화하고 구조화하는 데 매우 유용하다. 이를 통해 사용자에게 더 나은 가독성과 접근성을 제공할 수 있다. 

 

❓섹션을 어디에서 활용할까?

1. 채팅 애플리케이션에서 날짜별로 메시지를 구분할 때

2. 설정 화면에서 설정 함옥을 카테고리별로 구분할 때

3. 댓글 및 대댓글 기능을 구현할 때

4. 연락처 애플리케이션에서 알파벳별로 연락처를 정렬할 때 

등등 ..