Table View

우리가 이러한 화면을 구현해야 한다면 어떻게 구현할 수 있을까요?

바로 오늘 알아볼 table View를 이용하여 리스트 형태의 화면 구성을 구현할 수 있습니다!

Table View란?

• 여러 아이템들을 List 형태로 보여 주고 싶을 때 사용합니다.
• colum을 여러 개 갖지 않고 한 개만 가지고 있으며, 여러 데이터들을 행으로 보여 줍니다.
• 데이터를 동적으로 받아 표현할 수 있습니다.
• 스크롤 뷰를 상속받고 표시해야 하기 때문에 재사용 cell을 사용합니다.
• Delegate Pattern을 사용해 구현하는 인터페이스입니다.

---

Table View는 다음과 같은 구조로 이루어져 있습니다.

차례대로 보면 row가 모여서 section이 되고, section이 모여서 table view를 구성합니다.
추가로 section은 header와 footer를 가질 수 있습니다.

그리고 table view를 이루는 행, 즉 row를 cell이라고 표현하겠습니다.

app store를 살펴보면 여러 row에 여러 데이터가 구성되어 있습니다. 이처럼 table view를 이용하면 데이터만 바뀌고 행마다 동일한 UI 구성을 하고 있는 것을 확인할 수 있습니다.

하나하나 UI를 만드는 것이 아닌, 반복되는 UI를 하나의 cell로 만들어 놓고, 그것을 재사용하는 방식으로 Recycle cell을 사용하여 table view를 구현하게 됩니다.

Recycle cell이란?

Table view는 cell을 재사용하여 보여 줍니다.

예를 들어, 10개의 cell을 보여 준다고 했을 때, 실제로 화면을 통해서 전부 다 보이는 것이 아니고, 몇 개의 cell만 보이게 됩니다.

실제로 볼 수 있는 cell은 한정적이기 때문에, 화면에 보이는 table view cell을 만들어서 재사용합니다.

5개의 cell이 있고, list를 스크롤하여서 내리게 되면 cell 1번이 화면 밖으로 나가게 되면서 밑에서 다시 재사용되는 것을 볼 수 있습니다.

프로토콜 채택

table view를 사용하기 위해서는 프로토콜을 채택하여야 하고, 필수적으로 구현해 주어야 하는 메서드가 있습니다.

• UITableViewDataSource
  UITableViewDataSource 프로토콜을 채택하였습니다. 그러고 아무것도 구현해 주지 않으면 에러가 발생합니다.

'테이블 뷰의 셀이 몇 개인지 나타내 주는 메서드'와 '테이블 뷰를 어떤 셀을 가져와서 셀에 어떻게 데이터를 보여 줄 것인지 정해 주는 메서드'를 ⭐️⭐️ 필수적으로 ⭐️⭐️ 구현해 주어야 합니다.

+++ 추가로 UITableViewDelegate 프로토콜이 있습니다.

셀을 클릭하면 어떻게 할 것인지를 구현해 주는 함수를 구현할 수 있습니다. 아까와 다르게 구현해 주지 않는다고 해서 에러가 발생하지는 않는 선택적인 메서드입니다.