테이블 뷰(UITableView)_[iOS/Swift]_(2)

 

---

<Table View 리스트 만들기 2번째 방법>


2024.03.02 - [Study/YouTube 강의 공부] - 테이블 뷰(UITableView)_[iOS/Swift]_(1)
여기서 그대로 진행!

---

① Main.storyboard - Table view에 Table View Cell 추가 - 사이즈 조금 늘리고, 안에 Label 추가
(Label → 중앙정렬, Add New Constraints에서 상하좌우 0으로 셋팅)

---

② 추가한 Table View cell 클릭 - 우측 창 → Identifier : 이름
('Identifier: Type1' 으로 하겠음, <자유롭게>) 

---

③ 앞서 1번째 방법에서 reuseIdentifier을 "TableViewFirstType"이라고 정했었다.
이제는 이 이름이 "Type1"이 된다.

이 "Type1"을 지정하는 클래스가 필요하다. 이걸 어떻게 만드느냐!

New file - Swift file - 이름 정하기
(알아보기 쉽게 "Type1"으로 하겠음. <자유롭게>)

여기서 import foundation → import UIKit

위와 같이
 class Type1: UITableViewCell { }

이렇게 하면 Type1이 UITableViewCell을 상속받게 된다.
이 클래스는 아까 Main.storyborad에서 만든 셀과 연결할 수 있게 하는 역할을 한다.

---

④ Main.storyboard - Type1 - 우측 창 → class: Type1

이렇게 하고, 밑에 'Inherit Module From Target'에 체크!

---

⑤ 이제 설정한대로 잘 연결됐는지 확인하기!

위에 표시해 놓은 부분(↙) 클릭!

여기로 이동되면서 잘 연결됐음을 확인할 수 있다.

이제 이 상태에서 아까 만든 Label을 연결해야 한다.

---

⑥ Main.storyboard와 Type1.swift 화면을 동시에 띄워놓고,
스토리보드에 있는 Label을 Type1.swift 코드로
drag & drop!!

라벨 이름 자유롭게 적고 connect!
('Name: LabelText'으로 하겠음. <자유롭게>) 

Label 연결

---

⑦ 이제 다시 ViewController로 Go!

let cell = UITableViewCell.init( ~~~~~~~~) 이거 지우고,
let cell = TableViewMain.deq하면

이렇게 여러 가지가 뜰 것이다.

이거 선택!!

---

여기서 dequeueReusableCell이 뭘까? 🤔

"Reusable, 재사용할 수 있는 셀을 정리해서 TableViewMain에 넘기겠다."

→ 그 셀의 Identifier은 'Tpye1'이었고, 그 indexPath 순번에 해다앟는 셀을 만나게 되면,
"Type1"이라는 애를 TableViewMain에게 넣는다는 뜻.

---

---

⑧ 빈칸 채우기.
String → "Type1"
IndexPath → indexPath

---

⑨ 이제, 기존에 방법 1에서 적었던 cell.textLabel.text = "\(indexPath.row)" 지우고!!
cell.LabelText 를 쳐보면?? 

???? 안된다. 왜지??
→ 위에 'dequeue ~' 는 부모 속성이기 때문이다.

여기서 as 라는 것을 사용해 주어야 한다.
(as? - 타입을 안전하게 추론 / as! - 강제로 변환)

Type1은 UITableViewCell이라는 아이의 유전자를 물려받은 자식이다. (=상속받음)

let cell = TableViewMain.dequeueReusableCell(withIdentifier: "Type1", for: indexPath)
이건 UITableViewCell을 나타내기 때문에
"애가 아니라 상속받은 Type1이야!" 라고 정체성을 명확하게 밝혀주어야 한다.

이 역할을 하는 것이 바로 as? 와 as! 이다.
(as? - "나 맞아..?" / as! - "나 맞아!!" 이런 느낌)

즉, 우리가 원하는 건 자식인 'Type1' 이기 때문에
바로 뒤에 as! Type1 이라고 해줘야 함.
(Type1을 우리가 만들어서 확실하기 때문에 as!)

---

⑩ 이제 cell.LabelText 하면 나옴.
→ cell.LabelText.text = "\(indexPath.row)"

---

끝! 🥹
실행 Go!!

---

최종 코드

결과물

---

<방법 1과 2의 차이점>

보기에는 1, 2 차이가 별로 없어 보인다.
눈에 띄는 차이라면, 1은 좌측 정렬, 2는 중앙 정렬이라는 것?

그러나, 실전은 2번 방법이라고 생각하면 된다.
1번 방법은 거의 안쓰니까 '연습이다..' 생각하면 된다.

---