[Swift] TableView의 모든 것을 알아보기!!!

안녕하세요..? 저는 ㅇㅅㅈ이고요

오늘은 테이블뷰에 대해서 좀 더 자세히 공부해보았어요

 

그럼 정리 시작!

팔 닿는 햄? ㅎㅋ

---

 

iOS 앱 개발에서 많이 쓰이는 UI 컴포넌트 중 하나가 바로 UITableView! (그치만 컬랙션뷰가 더 많이 쓰인다는 사실)

수십 개, 수백 개의 데이터를 스크롤 가능한 리스트 형태로 보여줄 때 사용하며, 성능과 유연성 모두 뛰어남

이 글에서는 TableView의 기본 구조부터 작동 메커니즘, 실전 코드까지 차근차근 정리해보겠어요

---

TableView란?

• iOS에서 여러 개의 데이터를 세로 방향으로 나열해 보여주는 컴포넌트
  -> 그래서 위아래로 쭈르륵 스크롤 가능)
• UICollectionView보다 구조가 단순하고 리스트 형태 UI에 최적화되어 있음
  -> 현업에서는 더 고도화된 사용을 위해 컬랙션 뷰를 주로 쓴다고 함)
• 셀 재사용 메커니즘으로 메모리 효율성 극대화
  -> 요소 개수만큼 셀 만들면 메모리 낭비가 심하니 화면에 안보이는 셀들을 재활용해 효율적인 사용을 함

---

TableView 구성 요소

요소	설명
UITableView	리스트 전체를 담당하는 뷰
UITableViewCell	리스트의 각 항목(셀)을 나타냄
UITableViewDataSource	셀의 수와 셀에 들어갈 데이터를 제공하는 역할
UITableViewDelegate	셀 선택, 높이 설정 등 사용자 상호작용 및 레이아웃 제어

---

작동 원리 (메커니즘)

1. UITableView는 처음 화면에 표시될 때 dataSource에게 "몇 개의 셀이 필요한가?"를 묻고
   → numberOfRowsInSection 호출됨
   → 보통 ~.count 사용
2. 각 셀을 어떻게 표시할지 물음
   → cellForRowAt 호출됨
3. 셀을 새로 만드는 게 아니라, dequeueReusableCell(withIdentifier:)로 재사용 가능한 셀을 꺼내서 씀
4. 스크롤하면 보이지 않는 셀은 메모리에서 재사용 큐로 돌아가고, 새로 보여야 할 셀은 재사용되거나 새로 만들어짐

---

기본 사용 예시

// ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    let fruits = ["Apple", "Banana", "Cherry"]
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
    }

    // 데이터 개수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }

    // 셀 생성 및 데이터 설정
    func tableView(_ tableView: UITableView,
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath)
        cell.textLabel?.text = fruits[indexPath.row]
        return cell
    }

    // 셀 선택 처리
    func tableView(_ tableView: UITableView,
                   didSelectRowAt indexPath: IndexPath) {
        print("You selected \(fruits[indexPath.row])")
    }
}

 

Main.storyboard에서 UITableView를 배치하고, FruitCell이라는 식별자(identifier)를 가진 prototype cell을 설정해야 함

---

💡 자주 사용하는 메서드 & 기능

셀 업데이트

tableView.reloadData() // 전체 리로드

→ 셀 로드, 다시 로드해야할 때 불러주기

tableView.reloadRows(at: [indexPath], with: .automatic) // 특정 셀만 리로드

---

셀 삽입 / 삭제

tableView.insertRows(at: [indexPath], with: .fade)
tableView.deleteRows(at: [indexPath], with: .fade)

---

section 나누기

func numberOfSections(in tableView: UITableView) -> Int {
    return 2
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return section == 0 ? "과일" : "채소"
}

---

커스텀 셀 사용하기

1. UITableViewCell을 subclass로 생성
2. .xib 또는 Storyboard에서 커스텀 UI 구성
3. 코드에서 등록 및 연결:

tableView.register(UINib(nibName: "CustomCell", bundle: nil),
                   forCellReuseIdentifier: "CustomCell")

→ 이 때 nibName이나 Identifier는 Constans에 저장해두고 사용하면 더 좋음

---

 

prepareForReuse()

는 UITableViewCell, UICollectionViewCell 같은 셀 클래스에서 오버라이드하는 메서드로,
해당 셀이 재사용되기 전에 초기화 작업을 해주는 역할을 함

---

왜 필요?

테이블뷰/컬렉션뷰는 스크롤할 때마다 셀을 새로 만드는 게 아니라
재사용 큐에서 기존 셀을 꺼내서 다시 쓰는 구조임
→ 그래서 이전 데이터/스타일이 남아 있는 걸 초기화⭐️해서 덮어쓰기 전 상태로 돌려줘야 함

---

역할 요약

• 셀의 UI 상태 초기화 (예: 이미지, 색상, 텍스트 등)
• 이전 데이터/상태 클리어
• 애니메이션/타이머 중단 및 해제

---

예시

override func prepareForReuse() {
    super.prepareForReuse()
    
    imageView.image = nil
    label.text = nil
    backgroundColor = .white
}

이렇게 하면 셀에 이전에 표시된 이미지나 텍스트가
새로운 데이터로 덮어쓰기 전에 남아 있는 현상 방지 가능

 

이렇게 안해주면 덮어쓰다가 엉망진창 됨

---

📌 주의할 점

• prepareForReuse()는 셀을 재사용하기 직전에 자동 호출됨
• 직접 부르는 게 아니라 오버라이드해서 내용만 작성하면 됨
• 커스텀 셀 만들 때 꼭 구현해두는 게 좋음 (특히 비동기 이미지 로드할 때 중요)

---

요약하자면

prepareForReuse()는 재사용 셀이 화면에 다시 보이기 전에 이전 상태를 초기화하는 메서드
셀에 남아 있는 데이터를 클리어해서 깔끔하게 새 데이터를 넣을 수 있게 도와줌

---

마무리

DataSource, Delegate, 셀 재사용의 개념을 이해하고, 필요한 기능(삭제, 삽입, 커스텀 셀 등)을 조합하면 기본적인 리스트 화면은 구현 가능함

 

테이블뷰에 대해 공부했으니 다음에는 컬랙션 뷰에 대해서도 알아보겠삼~~~

 

그럼 안녕히 계세요