protocol vs delegate
portocol:알바 공고문,해야 할 일의 목록
delegate:대표자(명사),위임하다(동사),공고문을 보고 채용된 알바생
UITableView 소스 상세 설명
전체 구조
swift
class ViewController: UIViewController, // 화면 기본 기능
UITableViewDelegate, // 테이블 동작 (선택 등)
UITableViewDataSource // 테이블 데이터 제공3가지를 동시에 채택 UITableViewDelegate + UITableViewDataSource 는 테이블뷰를 사용하기 위한 필수 프로토콜
IBOutlet - 테이블뷰 연결
swift
@IBOutlet weak var table: UITableView!
// ^^^^^
// 스토리보드의 TableView와 연결된 변수키워드의미
| @IBOutlet | 스토리보드 UI와 코드를 연결 |
| weak | 메모리 순환 참조 방지 |
| UITableView! | 강제 언래핑 (스토리보드에서 반드시 연결) |
viewDidLoad - 초기 설정
swift
override func viewDidLoad() {
super.viewDidLoad()
table.delegate = self // 델리게이트를 이 ViewController로 지정
table.dataSource = self // 데이터소스를 이 ViewController로 지정
}table.delegate = self
↓
테이블뷰의 동작(셀 선택 등)을
이 ViewController가 처리하겠다!
table.dataSource = self
↓
테이블뷰에 보여줄 데이터를
이 ViewController가 제공하겠다!필수 메서드 3가지
1. 섹션 개수
swift
func numberOfSections(in tableView: UITableView) -> Int {
return 3 // 섹션 3개
}┌─────────────┐
│ 섹션 0 │
├─────────────┤
│ 섹션 1 │
├─────────────┤
│ 섹션 2 │
└─────────────┘생략하면 기본값 1 로 설정됨
2. 섹션당 행 개수
swift
func tableView(_ tableView: UITableView,
numberOfRowsInSection section: Int) -> Int {
return 5 // 각 섹션마다 5개의 행
}┌─────────────┐
│ 섹션 0 │
│ - 행 0 │
│ - 행 1 │
│ - 행 2 │
│ - 행 3 │
│ - 행 4 │
├─────────────┤
│ 섹션 1 │
│ - 행 0 │
│ ... │ 총 3섹션 x 5행 = 15개 셀3. 셀 구성 (핵심!)
swift
func tableView(_ tableView: UITableView,
cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// 셀 생성
let cell = UITableViewCell(style: .subtitle,
reuseIdentifier: "myCell")
cell.textLabel?.text = "\(indexPath.row)"
cell.detailTextLabel?.text = indexPath.description
cell.imageView?.image = UIImage(named: "smile.png")
return cell
}indexPath 란?
swift
indexPath.section // 몇 번째 섹션인지
indexPath.row // 몇 번째 행인지
// 예시
// 섹션1, 행2 → indexPath.section = 1, indexPath.row = 2셀 스타일 .subtitle
┌────────────────────────┐
│ 🖼 textLabel │ ← cell.textLabel?.text
│ detailTextLabel │ ← cell.detailTextLabel?.text
└────────────────────────┘
↑
imageView셀 스타일 종류
스타일구성
| .default | 이미지 + 메인텍스트 |
| .subtitle | 이미지 + 메인텍스트 + 서브텍스트 |
| .value1 | 메인텍스트 + 우측 서브텍스트 |
| .value2 | 메인텍스트(파란색) + 서브텍스트 |
reuseIdentifier 란?
셀을 매번 새로 만들면 메모리 낭비!
↓
화면 밖으로 나간 셀을 재사용
↓
"myCell" 이라는 이름표를 붙여서
같은 종류의 셀끼리 재활용실제 화면 결과
┌─────────────────────┐
│ 😊 0 │ 섹션0, 행0
│ [0, 0] │
├─────────────────────┤
│ 😊 1 │ 섹션0, 행1
│ [0, 1] │
├─────────────────────┤
│ 😊 2 │ 섹션0, 행2
│ [0, 2] │
├─────────────────────┤
│ 😊 3 │ 섹션0, 행3
│ [0, 3] │
├─────────────────────┤
│ 😊 4 │ 섹션0, 행4
│ [0, 4] │
├─────────────────────┤ ← 섹션1 시작
│ 😊 0 │
│ [1, 0] │
...총 15개 셀...
└─────────────────────┘전체 동작 흐름
1. viewDidLoad
→ delegate = self, dataSource = self 설정
2. numberOfSections
→ "섹션 3개 만들어줘" 반환
3. numberOfRowsInSection
→ "각 섹션마다 5행 만들어줘" 반환
4. cellForRowAt
→ 각 셀마다 호출되어 셀 구성 후 반환
→ indexPath로 몇번째 섹션/행인지 구분
5. 화면에 테이블뷰 표시테이블뷰는 delegate + dataSource 패턴으로 데이터와 UI를 분리해서 관리하는 것이 핵심입니다! 🎯
fast-food
"학식","민들레초밥","스벅","짜장면집","분식집"
Food 앱 소스 설명
전역 데이터
swift
var name = ["학식","민들레초밥","스벅","짜장면집","분식집"]
var food = ["돈까스","초밥","카페","피자집","한식집"]
var image = ["smile2.png","fast-food1.png","fast-food.png","dish.png","cutlery.png"]클래스 밖에 선언 → 어디서든 접근 가능한 전역변수 인덱스 0~4 로 name, food, image 가 서로 대응
핵심 변경점 - 커스텀 셀 사용
swift
// ❌ 기본 셀 (주석처리됨)
// let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "myCell")
// cell.textLabel?.text = name[indexPath.row]
// cell.detailTextLabel?.text = food[indexPath.row]
// cell.imageView?.image = UIImage(named: image[indexPath.row])
// ✅ 커스텀 셀 사용
let cell = tableView.dequeueReusableCell(
withIdentifier: "myCell",
for: indexPath) as! MyTableViewCell
cell.myLabel.text = name[indexPath.row]항목기본 셀커스텀 셀
| 클래스 | UITableViewCell | MyTableViewCell |
| 생성 방법 | UITableViewCell(style:) | dequeueReusableCell |
| 레이블 | cell.textLabel | cell.myLabel |
dequeueReusableCell 이란?
스크롤할 때 화면 밖으로 나간 셀을
새로 만들지 않고 재사용!
↓
메모리 절약 + 성능 향상swift
as! MyTableViewCell
// UITableViewCell → MyTableViewCell 로 다운캐스팅
// 스토리보드에서 만든 커스텀 셀 클래스화면 결과
┌─────────────────────┐
│ 학식 │ ← name[0]
├─────────────────────┤
│ 민들레초밥 │ ← name[1]
├─────────────────────┤
│ 스벅 │ ← name[2]
├─────────────────────┤
│ 짜장면집 │ ← name[3]
├─────────────────────┤
│ 분식집 │ ← name[4]
└─────────────────────┘
섹션 3개 x 행 5개 = 총 15셀
(name 배열은 5개라 섹션2,3은 반복)한줄 요약
기본 셀 → 커스텀 셀(MyTableViewCell) 로 업그레이드해서 스토리보드에서 직접 디자인한 레이아웃으로 테이블뷰를 구성! 🎯
