[UIKit] TableView + Custom Cell

iOS 애플리케이션 개발에서 중요한 컴포넌트 중 하나가 UITableView이다.

테이블 형식의 데이터를 표시하는데 사용하며 데이터를 목록 또는 그리드 형태로 표시할 수 있으며 주로 목록 형식으로 사용된다.

 

swift의 TableView에 대해 알아보자.

 

---

UITableView

 

UITableView란?

 

 

하나의 열에 세로로 스크롤되는 콘텐츠 행들을 표시한다. 스크롤을 할 수 있는 만큼 UIScrollView를 상속받고 있다.

 

 

UITableView의 구성 요소

 

 

1. Sections

: UITableView는 한 개 이상의 섹션으로 구성된다. 각 섹션은 하나 이상의 행을 포함하며 섹션을 사용하여 데이터를 그룹화하거나 분류할 수 있다. 

 

2. Rows

: 각 섹션은 하나 이상의 행을 포함하며, 각 행은 데이터 항목을 나타낸다.

사용자가 행을 터치하거나 선택할 수 있으며, 행을 누르면 관련 작업을 수행할 수 있다.

 

3. IndexPath

: IndexPath는 특정 섹션과 행을 식별하는 데 사용되는 객체이다.

 

4. DataSource

: UITableView의 데이터를 제공하는 객체를 말한다.

테이블 뷰에 표시할 데이터를 관리하고 데이터를 표시하는 방법을 제어한다.

 

5. Delegate

: 사용자 상호작용 및 테이블 뷰 동작을 제어하는 데 사용된다.

 

 

---

 

 

TableView는 TableView와 TableViewCell 두 가지로 이루어진다.

 

• TableView: TableViewCell을 여러 개 담기 위한 컨테이너
• TableViewCell: TableView 각 행에 표시되는 아이템

 

 

 

 

 

Custom Cell으로 TableView 만들어보기

 

1. TableView 불러오기

 

ViewController에 TableView를 원하는 위치에 배치를 해준다. 

 

 

2. TableViewCell 만들기

 

[command + N]버튼을 눌러 Cocoa Touch Class를 생성해준다.

XIB file 만들기 체크를 눌러준다. 

 

그러면 아래와 같이 swift 파일과 xib 파일이 같이 만들어진 것을 확인할 수 있다.

 

다음 TableViewCell을 커스텀해준다. 나는 UILabel 하나를 배치시켜줬다.

 

 

3. TableView와 TableViewCell 연결

 

먼저 TableViewCell의 indentifier를 설정해준다. 나는 "MyTableViewCell"로 설정하였다.

 

tableView에 delegate와 dataSource를 연결해준다.

 

---

 

🔎 dataSource

 

• numberOfSections: 전체 섹션 수 반환 
• numberOfRowsInSection: 특정 섹션에 대한 행의 수를 반환, 특정 섹션에 몇 개의 행이 있는 지를 정의한다.
• cellForRowAt: 각 행에 대한 셀을 반환, IndexPath 매개변수를 사용하여 특정 섹션과 행을 식별한다.

 

 

🔎 delegate

 

• didSelectRowAt: 사용자가 특정 행을 선택했을 때 호출된다.

 

 

---

 

위의 dataSource에서 다음과 같은 코드를 확인할 수 있다.

 let cell = tableView.dequeueReusableCell(withIdentifier: "MyTableViewCell", for: indexPath) as! MyTableViewCell

 

tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath)는 테이블 뷰에서 셀을 가져오거나 새로 만들어 반환하는 역할을 한다. 

 

즉, withIdentifier에서 작성한 cellIdentifier를 가지는 cell을 tableView에 연결해주는 것이다. 

 

---

 

이렇게 하고 실행을 해보면 정상적으로 작동할까??

다음과 같은 오류가 발생한다.

 

 

왜냐하면 사용자 정의 셀인 "MyTableViewCell"을 UITableView가 들어있는 ViewController에 사용하려면 nib을 Register 해주어야 한다. 사용자 정의 셀을 nib 파일로 디자인하는 경우, 테이블 뷰에서 이 nib 파일을 인식하도록 등록해야 한다.

등록하지 않으면 테이블 뷰가 해당 nib파일을 모르고, 오류가 발생하게 된다.

 

 

위와 같은 코드를 작성함으로써, 정상적으로 테이블 뷰와 사용자 정의 셀이 연결된다.