[iOS] TableView란? 공식문서를 읽어보자

# TableView란 무엇인갑?

- 사용자가 수정가능한 행의 단일 열에 데이터를 표시한다.

=> 즉 , 행을 나타내는 Label의 목록 View라고 생각한다.

 

#TableView의 특징

- 세로 스크롤 콘텐츠의 단일 열을 표시한다. ex)전화번호부목록처럼
- 행과 섹션으로 나뉘어 정보가 표시된다.
- 섹션(단면도, 부분)을 이용하면 관련 행을 함께 그룹화할 수 있따. ex)설정앱에 카테고리별로 묶여있는것처럼?

# TableView사용시 사용하는 개체들

- Cell
Cell은 콘텐츠에 대한 시각적 표현을 제공한다. UIKit에서 제공하는 기본 셀을 사용하거나 앱의 요구사항에 맞게 사용자 지정 셀을 정의할 수 있다.
- TableViewController
일반적으로 UITableViewController를 사용하여 TableView관리한다. 다른 ViewController도 사용할 수 있지만 일부 Table관련기능이 작동하려면 TableViewController가 필요하다.
- data source object
UITableViewDataSource프로토콜을 채택하고 테이블에 대한 데이터를 제공한다.
- delegate object
UITableViewDelegate프로토콜을 채택하고 테이블의 내용과의 사용자 상호작용을 관리한다.


# Filling a Table With Data | 데이터로 테이블을 채우기

- TableView의 Cell을 Dynamic 하게 설정하거나 또는 Static하게 설정할 수 있음

 

OverView

- TableView는 인터페이스의 데이터 기반요소이다.
- 데이터 소스개체, 즉 UITableViewDataSource프로토콜을 채택하는 개체를 사용해 해당 데이터의 각 부분을 화면에 렌더링 하는데 필요한 보기와 함께 앱의 데이터를 제공한다.
- TableView는 View를 화면에 정렬하고 data source object와 함께 작동하여 해당 데이터를 최상 상태로 유지합니다.
- TableView는 데이터를 행과 섹션으로 나눕니다. 행은 개별 데이터 항목을 표시하고
- 섹션을 관련행을 함께 그룹화한다.

- 섹션은 필수는 아니지만 이미 계층화된 데이터를 구성하는 좋은 방법이다.
예시) 연락처 앱은 각 연락처의 이름을 연속적으로 표시하고 그사람의 성의 첫 글자를 기준으로 행을 섹션으로 그룹화한다.

 

# Provide the Numbers of Rows and Sections | 행 및 섹션 수 제공

 

- 화면에 표시되기전에 TableView는 행과 섹션의 총 수를 지정하도록 요청합니다. 

 

데이터 원본 개체는 다음 두가지 방법을 사용하여 이정보를 제공합니다.

func numberOfSections(in tableView: UITableView) -> Int // Optional

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

- 이런 메서드들은 가능할 빠르게 행과 섹션 수를 반환합니다.
- 이렇게 하려면 행 및 섹션 정보를 쉽게 검색할 수 있는 방식으로 데이터를 구조화해야할 수 있습니다.

예를들면 테이블의 데이터를 관리하기 위해 배열을 사용하는것을 고려하세요
배열은 테이블 보기 자체의 자연스러운 구성과 일치하기때문에 섹션과 행을 모두 구성하는데 좋은 도구입니다.

 

 

# TableView의 행 및 섹션수 반환하는 데이터 소스메서드 예시코드

 

아레 예제 코드는 다중 섹션 테이블의 행 및 섹션 수를 반환하는 데이터 소스 메서드의 구현을 보여줍니다.
- 이 테이블에서 각 행은 문자열을 표시하므로 구현은 각 섹션에대한 문자열 배열을 저장한다. 

- 섹션을 관리하기 위해 구현은 배열의 배열(hierarchicalData)을 사용한다.
- 섹션 수를 가져오기 위해 데이터 소스는 hierarchicalData배열의 항목 수를 반환한다.
- 특정 섹션의 행 수를 가져오기 위해 데이터 소스는 해당 자식 배열의 항목수를 반환한다.

 

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
}

 

#Define the Appearance of Rows | 행 모양 정의

 

- 스토리보드내 TableViewCell을 추가함으로써 행을 정의할 수 있음
- Cell은 View이며 콘텐츠를 표시하는데 필요한 모든 하귀 View를 포함할 수 있다.
- 콘텐츠 영역 레이블, ImageView 및 기타 View를 추가하고 제약조건을 사용해 보기를 정렬 할 수 있음
- Prototype Cells를 사용하여 Cell의 개수를 늘리거나 줄일 수 있다.

 

Prototype Cells에서 다음과 같은 작업을 할 수 있음

- Cell style을 표준 또는 사용자지정으로 설정할 수 있음
- Cell의 Identifier을 지정할 수 있음
- 사용자 정의 Cell은 view 및 제약조건을 추가한다.
- ID관리자에서 사용자 정의 Cell의 class를 지정한다.

- 사용자 정의 View가 있는 Cell을 작성할때는 UITableViewCell의 서브클래스를 정의하여 해당 View를 관리하시오.

- 하위 클래스에서 앱 데이터를 표시하는 사용자 지정 View에 대한 Outlet을 추가하고 해당 Outlet 스토리보드 파일의 실제 View를 연결한다. 왜냐하면 런타임에 Cell을 구성하려면 Outlet이 필요하기때문

# Create and Configure Cells for Each Row | 각 행에 대한 셀 생성 및 구성

tableView(_:cellForRowAt:)를 사용해 다음 패턴으로 구현한다.

1. TableView에 dequeueReusableCell(withIdentifier:for:) 메서드를 호출하여 Cell 개체를 검색한다.

2. 앱의 사용자 지정 데이터로 Cell View를 구성한다.

3. Cell을 TableView로 반환한다.
단일 텍스트 레이블이 포함된 셀을 구성하는 데이터 소스메서드의 예제코드를 확인해보자

override func tableView(_ tableView: UITableView,
                        cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // identifier가 설정되어있는 Cell을 요청한다.
   let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyleCell", for: indexPath)
        
   // 행과 섹션 번호로 셀의 내용을 구성한다.
   // 기본 Cell style은 labelText가 있음을 보장한다.
   cell.textLabel!.text = "Row \(indexPath.row)"
   return cell
}

- TableView에서는 테이블의 각 행에 대한 셀을 생성하도록 요청하지 않는다. 대신 TableView는 셀을 느리게 관리하여 테이블의 보이는 부분에 있거나 근처에 있는 셀만 요청한다.

=> TableView는 lazy로 관리되어 필요한 부분인 View에 보이는 영역만 Cell을 요청한다.

 

- 셀을 lazy로 생성하면 테이블이 사용하는 메모리양이 줄어든다. 그러나 이는 동시에 데이터 원본 개체가 셀을 빠르게 생성해야함을 의미한다.

=> lazy로 필요한 부분만 그때그때 보여질필요가 있을때만 초기화시켜서 사용되어 메모리양이 줄어든다. 하지만 이는 빠른 Cell의 객체를 생성할 수 있어야한다. 빠르게라는 말이 lazy로 초기화가 되는게 아닌걸 말하는걸까 ?

 

- Reference

- https://developer.apple.com/documentation/uikit/views_and_controls/table_views/filling_a_table_with_data

Apple Developer Documentation