[iOS] UITableView (테이블뷰) 사용해보기

UITableView에 대한 여러가지 글들을 쓰고싶었는데, 항상 마음 속 발목을 잡은 것은 UITableView에 대한 글의 시작이었습니다.

더 이상 미루면 안되겠다 느껴 바로 시작 ..!

 

Xcode 14.1
Swift 5.7
Storyboard

 

오늘의 목표

---

오늘 글을 쓸 UITableView의 완성 화면은 이렇습니다 !

BTS, 손흥민, 봉준호, Rx 렛츠고 ~

 

프로젝트 생성 & 기본 설정

---

실습 프로젝트를 만들어주겠습니다 ~~

 

⌘+N 혹은 File -> Nex -> File 로 UITableViewController 파일을 만들어줄게요

 

UITableViewController

---

저는 처음 사용하게 될 떄, 상속하는 class를 확인하는 습관이 생겼어요 ! UITableViewController도 한번 살펴볼게요 !

 

 

우리가 자주 사용하던 UIViewController class를 상속하고있고,

UITableViewDelegate, UITableViewDataSource protocol을 채택하고있네요 !

 

자 이제 우린 이런 화면을 보고있겠죠 ? 하나씩 살펴보면 좋을 거같아요

protocol UITableViewDataSource를 채택했기 때문에 구현해줘야 할 메소드들이 있는데요
numberOfSections 말 그대로 Section의 갯수를 지정해주는 메소드입니다 !
optional func 이기 때문에 Sections로 나누는 경우가 아니라면 구현하지않아도 돼요 !
주석에는 구현하지않을시에는 기본 return 값이 1이라고하네요 !
오늘 구현할 실습 프로젝트의 Section은 1개이기 때문에 return 1 해줄게요

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

numberOfRowsInSection은 Section 내에서 몇개의 row를 보여줄지에 대한 메소드입니다 !
표시해 줄 Data의 갯수라고 생각하면 됩니다 !
월클 리스트를 만들어주고, 리스트의 갯수를 메소드의 반환값으로 사용하겠습니다 !
...
let worldClassList: [String] = ["BTS", "손흥민", "봉준호", "Rx"]
    
override func viewDidLoad() {
    super.viewDidLoad()
...

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return worldClassList.count
}

 

오늘은 스토리보드를 사용하기 때문에 스토리보드에서도 추가해줘야해요 !!

 

 

 

실습 프로젝트를 만들면서 생긴 기본 ViewController는 지워줄게요 ~~

 

⌘+⇧+L 키로 Table View Controller 를 검색해주세요 ~!

 

 

이제 추가도 했곘다 한번 실행 시켜볼까요 ?

 

으아. . 아직 나오는게 없죠 ?

 

 

셀을 만든 후, 적절한 데이터 값으로 셀의 속성을 업데이트하기위한 메소드입니다

dequeReusableCell은 따로 글을 써야할거같아요 이번 글은 넘어갈게요 !

worldClassList를 index를 통해서 접근하고 있는데요 indexPath는 어떤거고 indexPath.row는 뭘까요 ?

section은 알거같지만, row, item의 차이는 무엇일까요 ?

기능적으로는 같지만, TableView -> section/row, ColletionView -> section/item 용어의 차이가 있습니다

그 예로, UITableViewDataSource의 cellForRowAt이 UICollectionViewDataSource의 cellForItemAt 메소드와 같은 역할을 합니다.

 

스토리보드에 추가한 TableViewController의 아이덴티티 인스펙터 탭을 눌러서

Custom Class를 사진과 같이 추가해줍니다 !!

 

 

그 후에 Table View Cell의 identifier를 지정해줄게요 !

 

이게 프로토콜들의 메소드들도 구현도했으니 ! 실행시켜보시죠 ~!?