Table views 🍎

1️⃣ 정의

사용자 정의 가능한 행으로 구성된 단일 열에 데이터를 표시

2️⃣ 설명

• 테이블 뷰는 세로로 스크롤되는 내용을 단일 열로 표시하며, 행과 섹션으로 나뉘어 있음
• 각 행은 앱과 관련된 단일 정보를 표시하고, 섹션을 사용하여 관련된 행을 그룹화할 수 있음

3️⃣ 구성

테이블 뷰는 다양한 객체들 간의 협력으로 구성됨

• 셀 (Cells) : 셀은 컨텐츠의 시각적인 표현을 제공하고, UIKit에서 제공하는 기본 셀을 사용하거나 앱의 요구에 맞게 사용자 정의 셀을 정의할 수 있음
• 테이블 뷰 컨트롤러 (Table view controller) : 일반적으로 UITableViewController 객체를 사용하여 테이블 뷰를 관리함. 다른 뷰 컨트롤러도 사용할 수 있지만, 일부 테이블 관련 기능을 사용하려면 테이블 뷰 컨트롤러가 필요함
• 데이터 소스 객체 (Data source object) : 이 객체는 UITableViewDataSource 프로토콜을 채택하고 테이블에 대한 데이터를 제공
• 델리게이트 객체 (Delegate object) : 이 객체는 UITableViewDelegate 프로토콜을 채택하고 사용자의 테이블 내용과의 상호작용을 관리

4️⃣ 테이블에 데이터 채우기

• 테이블의 셀을 동적으로 데이터 소스 객체를 사용하여 생성하고 구성하거나, 스토리보드에서 정적으로 제공할 수 있음
• 테이블 뷰는 인터페이스의 데이터 기반data-driven 요소
• 데이터 소스 객체(UITableViewDataSource 프로토콜을 채택한 객체)를 사용하여 앱의 데이터 및 각 데이터를 화면에 렌더링하는 데 필요한 뷰를 제공함
• 테이블 뷰는 뷰를 화면에 배치하고 데이터 소스 객체와 함께 작동하여 데이터를 최신 상태로 유지함
• 테이블 뷰는 데이터를 행row과 섹션section으로 구성하여 정리함
• 행은 개별 데이터 항목을 표시하고, 섹션은 관련된 행을 함께 그룹화함
• 섹션은 필수는 아니지만 이미 계층적인 데이터를 구성하는 좋은 방법

5️⃣ 행(row)과 섹션(section)의 개수를 제공하는 메서드

테이블 뷰가 화면에 나타나기 전에, 테이블 뷰는 총 행(row)과 섹션(section)의 개수를 지정하도록 요청함

func numberOfSections(in tableView: UITableView) -> Int  // Optional 
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

• 메서드를 구현할 때는 가능한 빠르게 행(row)과 섹션(section)의 개수를 반환해야 함
• 행과 섹션 정보를 쉽게 가져올 수 있도록 데이터를 구조화해야 할 수도 있음
• 데이터를 구조화하여 행과 섹션의 정보를 쉽게 가져올 수 있다면, 테이블 뷰의 관리와 사용자 경험을 개선할 수 있음
• 예를 들어, 테이블의 데이터를 관리하기 위해 배열을 사용하는 것을 고려해 볼 수 있음

var hierarchicalData = [[String]]() 
 
override func numberOfSections(in tableView: UITableView) -> Int {
   return hierarchicalData.count // 섹션의 갯수
}
   
override func tableView(_ tableView: UITableView, 
                        numberOfRowsInSection section: Int) -> Int {
   return hierarchicalData[section].count // 섹션안의 행의 갯수
}

6️⃣ 행(row)의 모양 정의

• 셀을 사용하여 스토리보드 파일에서 테이블의 행row의 모양을 정의함
• 셀은 테이블의 행을 위한 템플릿 역할을 하는 UITableViewCell객체
• 셀은 뷰이며, 컨텐츠를 표시하는 데 필요한 모든 하위 뷰를 포함할 수 있음
• 라벨, 이미지 뷰 및 다른 뷰를 컨텐츠 영역에 추가하고, 제약 조건을 사용하여 이러한 뷰를 정렬할 수 있음
• 앱의 인터페이스에 테이블 뷰를 추가하면 구성할 수 있는 하나의 프로토타입 셀(템플릿)이 포함됨
• 추가적인 프로토타입 셀을 추가하려면 테이블 뷰를 선택하고 Prototype Cells속성을 업데이트 해야함
• 각 셀은 스타일을 가지며, 이는 셀의 모양을 정의함
• UIKit에서 제공하는 표준 스타일 중 하나를 선택하거나, 사용자 정의한 커스텀 스타일을 정의할 수 있음

  셀 스타일을 사용자 정의로 설정하거나 표준 셀 스타일 중 하나로 설정 가능

  • 셀의 Identifier속성에 비어 있지 않은 문자열을 할당
  • 사용자 정의 셀의 경우, 셀에 뷰와 제약 조건을 추가
  • 아이덴티티 인스펙터에서 사용자 정의 셀의 클래스를 지정

• 사용자 정의 뷰를 포함하는 셀을 생성할 때, UITableViewCell의 서브클래스를 정의하여 해당 뷰를 관리함
• 서브클래스에서 앱의 데이터를 표시하는 사용자 정의 뷰에 대한 아웃렛을 추가하고, 이러한 아웃렛을 실제로 스토리보드 파일의 뷰와 연결

  아울렛

  • 아울렛은 iOS 개발에서 인터페이스 빌더Interface Builder와 코드를 연결하기 위해 사용되는 속성

• 이러한 아웃렛은 런타임에 셀을 구성하는 데 필요

7️⃣ 행(row)에 대해 셀을 생성하고 구성

• 테이블 뷰가 화면에 나타나기 전에, 테이블 뷰는 보이거나 가까운 위치에 있는 행들을 위해 데이터 소스 객체에게 셀을 제공하도록 요청
• 데이터 소스 객체의 tableView(_:cellForRowAt:) 메서드는 빠르게 응답해야 함

  tableView(_:cellForRowAt:) 메서드를 다음과 같은 패턴으로 구현

  • 테이블 뷰의 dequeueReusableCell(withIdentifier:for:)메서드를 호출하여 셀 객체를 가져옴
  • 셀의 뷰를 사용자의 앱 데이터로 구성
  • 셀을 테이블 뷰에 반환

• 기본 셀 스타일의 경우, UITableViewCell에는 구성해야 할 뷰가 포함된 속성이 있음
• 사용자 정의 셀의 경우, 디자인 시간에 셀에 뷰를 추가하고 해당 뷰에 액세스하기 위한 아울렛을 추가
• 테이블 뷰는 테이블의 각 행에 대해 셀을 생성하도록 요청하지 않는 대신, 테이블 뷰는 필요한 셀을 지연해서 요청하며 테이블의 가시 영역에 있는 셀에 대해서만 요청합
• 지연해서 셀을 생성함으로써 테이블이 사용하는 메모리 양을 줄일 수 있는 대신, 데이터 소스 객체가 셀을 빠르게 생성해야 한다는 것을 의미
• tableView(_:cellForRowAt:) 메서드를 사용하여 테이블의 데이터를 로드하거나 시간이 오래 걸리는 작업을 수행하면 안됨❌

📌 dequeueReusableCell(withIdentifier:for:)

지정된 재사용 식별자에 대한 재사용 가능한 테이블 뷰 셀 객체를 반환하고, 해당 셀을 테이블에 추가하는 메서드

func dequeueReusableCell(
    withIdentifier identifier: String,
    for indexPath: IndexPath
) -> UITableViewCell

• Parameters
  • identifier : 재사용할 셀 객체를 식별하는 문자열이고, 이 매개변수는 nil이 아니어야 함
  • indexPath : 셀의 위치를 지정하는 인덱스 경로. 항상 데이터 소스 객체에서 제공하는 인덱스 경로를 지정해야함. dequeueReusableCell메서드는 테이블 뷰에서의 셀 위치에 따라 추가 구성을 수행하기 위해 인덱스 경로를 사용함
• Return Value
  • UITableViewCell : 지정된 재사용 식별자와 연관된 객체, dequeueReusableCell메서드는 항상 유효한 셀을 반환
• 지정된 타입의 기존 셀이 있는 경우 해당 셀을 반환하거나, 이전에 제공한 클래스 또는 스토리보드를 사용하여 새로운 셀을 생성하고 반환
• 테이블 뷰의 데이터 소스 객체의 tableView(:cellForRowAt:)메서드에서만 호출 해야함
• 데이터 소스의 tableView(:cellForRowAt:) 메서드 이외에는 이 메서드를 호출하면 안됨❌
• 다른 시점에서 셀을 생성해야 할 경우에는 dequeueReusableCell(withIdentifier:)를 사용 해야함
• register(:forCellReuseIdentifier:) 또는 register(:forCellReuseIdentifier:) 메서드를 사용하여 클래스 또는 nib 파일을 등록할 수도 있고, dequeueReusableCell메서드를 호출하기 전에 등록 작업을 수행해야 함

📌 IndexPath

중첩된 배열 트리에서 특정 위치로 이동하는 데 사용되는 인덱스 목록

중첩된 배열 트리

• 배열 안에 다시 배열이 중첩되어 있는 데이터 구조를 의미

struct IndexPath

• 인덱스 경로의 각 인덱스는 트리 구조에서 한 노드에서 다른, 더 깊은 노드로 이동하기 위한 자식 배열 내의 인덱스를 나타냄

Property

• row : 인덱스 경로의 row 값
• section : 인덱스 경로의 section 값

---

출처📚

🍎Apple Docs: Table views
🍎Apple Docs: Filling a table with data
🍎Apple Docs: dequeueReusableCell(withIdentifier:for:)
🍎Apple Docs: IndexPath