[번역] Filling a table with data (애플 공식 문서)

삭제된 Velog·2024년 9월 2일

UIkit

UIKit

목록 보기

9/21

본 글은 Filling a table with data (애플 공식 문서)를 한국어로 번역하여 옮긴 글입니다.

테이블을 위한 셀을 동적으로 구성하고 생성하거나, 스토리보드에서 셀을 정적으로 제공하세요.

Overview

테이블 뷰는 인터페이스의 요소를 데이터에 의존합니다. (UITableViewDataSource 프로토콜을 준수하는) 데이터 소스(data source) 객체를 사용하여 화면에 데이터의 각 조각을 그릴 필요가 있는 뷰와 함께, 앱의 데이터를 제공합니다. 테이블 뷰는 화면에 뷰를 배열하고 데이터 소스 객체와 함께 데이터를 최신 상태로 유지합니다.

테이블 뷰는 데이터를 섹션(section)과 행(row)으로 구성합니다. 행은 개별적인 데이터를 보여주고, 섹션은 관련된 행들을 함께 묶어줍니다. 섹션은 필수로 요구되진 않지만, 이미 계층적으로 구성된 데이터를 보여주는 데 좋은 방법입니다. 예를 들어, 연락처 앱은 각 연락처의 이름을 행에 보여주고, 이름의 첫 번째 글자를 기준으로 행들을 섹션으로 묶습니다.

Provide the numbers of rows and sections

화면에 나타나기 전에, 테이블 뷰는 행과 섹션의 수를 명시하도록 요청합니다. 데이터 소스 객체는 아래 메서드를 사용하여 해당 정보를 제공합니다.

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

이 메서드의 구현에서, 가능한 한 빠르게 행과 섹션의 수를 반환해야 합니다. 이렇게 하려면 행과 섹션 정보를 쉽게 다룰 수 있도록 데이터를 구조화해야 할 수 있습니다. 예를 들어, 테이블의 데이터를 관리하기 위해 배열을 사용하는 걸 고려해보세요. 배열은 테이블 뷰의 자연스러운 구성 방식과 일치하기 때문에 섹션과 행 모두를 구성하는 데 좋은 도구입니다.

아래 예제는 여러 섹션이 있는 테이블에서 행과 섹션의 수를 반환하는 데이터 소스 메서드의 구현을 보여줍니다. 이 테이블에서, 각 행은 문자열을 보여주기에 구현은 각 센션에 대해 문자열 배열을 저장합니다. 섹션을 관리하기 위해, 구현은 배열의 (계층적인 데이터라 불리는) 배열을 사용합니다. 섹션의 수를 가져오려면, 데이터 소스는 계층적인 데이터 배열의 요소의 수를 반환합니다. 특정 섹션의 행의 수를 가져오려면, 데이터 소스는 각각의 자식 배열의 항목의 수를 반환합니다.

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

스토리보드 파일에서 셀을 사용하여 테이블 행의 모습을 정의하세요. 셀은 테이블 행의 템플릿으로 작동하는 UITableViewCell 객체입니다. 셀은 뷰이며, 컨텐츠를 표시하는 데 필요한 어느 하위 뷰도 포함할 수 있습니다. 레이블(label), 이미지 뷰를 비롯한 여러 뷰를 컨텐츠 영역에 추가하고, 제약을 사용하여 해당 뷰들을 배치할 수 있습니다.

앱의 인터페이스에 테이블 뷰를 추가하면, 구성할 수 있는 하나의 프로토타입 셀을 포함하고 있습니다. 더 많은 프로토타입 셀을 추가하려면, 테이블 뷰를 선택하고 Prototype Cell 속성에서 추가할 수 있습니다. 각 셀은 모습을 정의하는 스타일을 가집니다. UIKit이 제공하는 표준 스타일을 선택하거나, 직접 커스텀 스타일을 정의할 수 있습니다.

아래 그림은 표준 셀 스타일 중 하나를 사용하는 두 개의 프로토타입 셀을 가진 테이블을 보여줍니다.

스토리보드 파일에서, 각 프로토타입 셀에 다음 작업을 수행하세요.

셀 스타일을 custom이나 표준 셀 스타일 중 하나로 설정하세요.
셀의 식별자(identifier) 속성에 문자열을 할당하세요.
커스텀 셀의 경우, 셀에 뷰와 제약을 추가하세요.
Identity Inspector에서 커스텀 셀의 클래스를 지정하세요.

Create and configure cells for each rows

테이블 뷰가 화면에 나타나기 전에, 테이블 뷰는 데이터 소스 객체에게 테이블의 보이는 부분이나 그 근처에 있는 셀을 제공하도록 요청합니다. 데이터 소스 객체의 tableView(_:cellForRowAt:) 메서드는 빠르게 응답해야 합니다. 아래 패턴에 따라 이 메서드를 구현하세요.

셀 객체를 다루기 위해 테이블 뷰의dequeueReusableCell(withIdentifier:for:) 메서드를 호출하세요.
앱의 커스텀 데이터로 셀의 뷰를 구성하세요.
테이블 뷰에 셀을 반환하세요.

표준 셀 스타일의 경우, UITableViewCell은 구성해야 할 뷰를 위한 프로퍼티가 포함되어 있습니다. 커스텀 셀의 경우, 다자인 시 셀에 뷰를 추가하고, 해당 뷰에 접근하기 위한 아웃렛(outlet)을 설정하세요.

아래 예제는 단일 텍스트 레이블을 포함하는 셀을 구성하는 데이터 소스 메서드의 구현을 보여줍니다. 셀은 표준 셀 스타일 중 하나인 Basic 스타일을 사용합니다. Basic 스타일 셀의 경우, UITableViewCell의 textLabel 프로퍼티는 데이터와 함께 구성할 수 있는 레이블 뷰를 포함하고 있습니다.

override func tableView(_ tableView: UITableView,
						cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	// Ask for a cell for appropriate type.
    let cell = tableView.dequeueReusableCell(withIdentifier: "basicStyleCell", for: indexPath)
    
    // Configure the cell's contents with the row and section number.
    // The Basic cell style guarantee a label view is present in textLabel.
    cell.textLabel!.text = "Row \(indexPath.row)"
    return cell
}

테이블 뷰는 각 테이블 행에 대해 셀을 생성하라고 요청하지 않습니다. 대신에, 테이블 뷰는 테이블의 보이는 부분이나 그 근처에 있는 셀을 요청하며 셀을 느리게(lazily) 관리합니다. 느린 셀 생성은 테이블이 사용하는 메모리의 양을 줄여줍니다. 그러나, 이는 데이터 소스 객체가 셀을 빠르게 생성해야 한다는 걸 의미합니다. 테이블의 데이터를 로드하거나 긴 시간이 걸리는 작업은 tableView(_:cellForRowAt:) 메서드에서 하지 마세요.

⚪️ Note
표준 셀 스타일을 사용할 것 외에도, 원하는 모든 뷰를 포함하는 커스텀 셀을 정의할 수 있습니다. 셀을 구성하는 자세한 방법은 Configuring the cells for your table을 참조하세요.

Prefetch data to improve performance

테이블 뷰의 스크롤링(scrolling) 성능은 매우 중요합니다. 데이터베이스에서 데이터를 가져오는 것처럼 테이블에 데이터를 불러오는 일이 큰 비용을 수반한다면, 셀이 스크롤되어 뷰에 보이기 전 비동기적으로 데이터 로드를 시작하는 (UITableViewDataSourcePrefetching 프로토콜을 준수하는) 사전 로딩(prefetching) 데이터 소스 객체를 사용하세요.

사전 로딩 데이터 소스 객체를 구현하는 자세한 방법은 UITableViewDataSourcePrefetching을 참조하세요.

Specify data statically in the storyboard

테이블의 컨텐츠가 절대로 바뀌지 않거나 프로토타이핑(prototyping) 동안 시간을 절약하기 위해 정적 테이블을 사용하세요. 정적 테이블은 스토리보드 파일에서 모든 테이블의 데이터를 명시하며, 데이터 소스 객체를 구현할 필요가 없습니다. 정적 테이블은 런타임에 데이터를 변경할 수 없기에, 상용 앱에서는 제한적으로 사용해야 합니다.

스토리보드 파일에서 정적 테이블을 구성하세요.