UITableView

UITableView

• 단일 열 안에 행을 사용하여 데이터를 나타내는 view
• 수직 스크롤을 할 때 같은 형태가 반복되면서 내용은 달라지는 view
• 수직 스크롤만 가능하다.
• 테이블의 개별 항목을 구성한는 단위를 cell이라고 하며 타입은 UITaleViewCell이다.
• indexPath값을 통해 cell을 구분하며 여러 행은 하나의 섹션 안에 구성될 수 있고, 각 섹션은 header와 footer를 가질 수 있다.
• 또한 스크롤, 행 선택, 테이블 내용 편집, 행 추가 또는 제거 애니메이션과 같은 일반적인 동작을 처리하기 위한 내장 기능이 있다.

 

 

UITableView를 왜, 언제 사용할까

• UI가 반복되고, 데이터만 다른 경우
• 데이터가 많아 재사용이 필요한 경우
• 데이터가 가변적일 때, 동적할당이 가능하다.
• 메모리를 절약하여 많은 데이터를 효율적으로 표시할 수 있기 때문에, 단순한 항목을 표시할 때는 tableView로 충분함

 

하지만

 

데이터는 적당히 많으면서 셀 종류도 두어개, 많게는 10개 정도. 유저 인터랙션도 있고 그에 따른 상태 변화와 UI 변화도 있는 경우. 그럴땐 뷰 재사용이 꼭 필요한지, 아니면 간단하고 안전한 코드가 더 이득일지 판단을 내려야 한다. 경험적으로 두 페이지가 넘어가지 않는 경우나, 필요한 뷰들을 한꺼번에 생성해도 메인쓰레드가 블락되지 않는 정도라면 간결한 코드의 장점이 더 크다.

 

테이블의 단점

• 표시하려는 cell을 반환하기 전에 메세지 크기에 많은 cell의 높이를 미리 계산하여 UITableView에 전달해야 한다.
• 뷰 인스턴스를 재사용하는 장점을 얻는 대신 구조가 더 복잡해지고 코드가 길어지고 버그에 취약해진다.

테이블뷰가 필요가 없는 경우는 셀이 재사용될 필요가 거의 없거나 재사용이 안되는 경우다. 테이블 열의 갯수가 적으면 메모리 걱정을 할 필요가 없다. 또한 테이블뷰의 열이 10개인데 10개가 다 다른 종류의 셀이라면 아무것도 재사용되지 않는다. 굳이 테이블뷰를 쓰지 않아도 UIStackView와 UIScrollView를 사용하여 훨씬 간결한 코드로 UI를 만들 수 있다. 이 방식은 뷰를 직접 참조하여 들고 있을 수 있어 언제든 간단하게 변화를 줄 수도 있고, 테이블뷰처럼 의무적으로 호출해야 하는 메서드도 없다. 

 

 

UITableView는 어떻게 사용할까(Storyboard)

https://guides.codepath.com/ios/Table-View-Guide

 

1. Interface Builder로 UITableView 추가

Object Library를 열고 Table View 항목을 view에 끌어다가 놓고 크기를 조정한다.

 

2. UITableView에 대한 @IBOutlet 만들기

Aisstant Editor(cmd+option+control +Enter)를 키고 tableView를 control을 누른 상태로 오른쪽 마우스를 클릭하여 에디터로 끌어온다.

 

3. UITableViewDataSource와 UITableViewDelegate 프로토콜 채택하기

이제 해당 뷰컨트롤러에 UITableViewDataSource와 UITableViewDelegate 프로토콜을 채택해야 한다.

 

UITableViewDataSource?

• Object가 데이터를 관리하고 tableView에 대한 셀을 제공하기 위해 채택하는 프로토콜

테이블 뷰는 데이터를 보여주기만 하지 자체적으로 데이터를 관리할 수 없기 때문에 데이터를 관리하기 위해서는 이 프로토콜을 사용해야 한다. data source object는 테이블에서 데이터와 관련된 요청이 오면 응답하며 테이블의 데이터를 직접 관리하거나 앱의 다른 부분과 조정하여 해당 데이터를 관리한다.

 

필수 메서드 2가지

UITableViewDataSource 필수 메서드

1. numberOfRowsInSection - 각 섹션에 필요한 행 수를 반환(Int)

2. cellForRowAt - tableView에서 사용하려는 cell을 반환(UITableViewCell)

 

UITableViewDelegate?

• 테이블 뷰에서 section의 header, footer를 관리하고 셀을 삭제하거나 위치를 바꾸고 그 외의 다른 작업을 수행하기 위한 메서드를 제공

 

4. UITableViewCell Register하고 DataSource와 Delegate 설정하기(viewDidLoad 안에)

tableView

UITableView의 IBOutlet 변수에 .을 붙이면 dataSource와 delegate가 나오는데 둘다 선언하여 self를 할당한다.

이것은 tableView(ViewController)가 UITableViewDataSource와UITableViewDelegate  프로토콜을 실행한다는 것을 의미한다.

 

.register느 TableView에서 사용할 수 있는 UITableViewCell을 등록하는 것이다. forCellReuseIdentifier은 기본 tableViewCell을 등록하는 것이다. 이렇게 하면 나중에 저 Indetifier를 가진 cell을 재사용할 수 있다.

 

5. UITableViewDataSource와 UITableViewDelegate 메서드 업데이트하기

모든 코드가 완료가 되었다면 필수메서드의 반환값을 업데이트해준다. 위에서 설명했듯이 각 섹션에 필요한 행의 수를 numberOfRowsInSection로 반환하고

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.tableViewData.count
}

cell의 UI를 cellForRowAt 메서드를 통해 업데이트한다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: HoodCellIdentifier, for: indexPath) as? HoodCell else {return UITableViewCell()}
    return cell
}

 

dequeueReusableCell(withIdentifier:for:)

• 지정된 재사용 Indetifier(식별자)에 대한 재사용 가능한 테이블 뷰 셀 객체를 반환하고, 이를 테이블에 추가함

 

파라미터

- withIdentifier: 지정된 재사용 Indetifier(식별자)를 말하며, 재사용 되는 셀 객체를 식별 할 수 있는 String이다. 또한 nil이 면 안된다.

- indexPath: 셀의 특정 위치를 알려 주며 dataSource 객체에게 항상 특정한 indexPath를 알려줘야 한다.

 

만약 dequeueReusableCell을 사용하지 않는다면 cell을 재사용하지 않아 만약 셀이 10000개 필요하다면 그만큼의 cell을 생성해 주어야 하고 메모리는 폭발하게 될 것이다. dequeueReusableCell을 사용한다면 테이블 높이와 셀 높이를 기반으로 정확한 개수의 셀을 생성한다. 셀이 스크롤 화면 밖으로 밀려나면, 이 셀은 reuse Queue에 들어가게 되고, dequeueReusableCell을 호출할 때 테이블 셀에 의해 반환된다.

 

따라서 효율적인 메모리 관리를 위해서 셀을 재사용해야 한다.

 

 

 

UITableView 와 UICollectionView 비교

공통점

• 셀 등록, 셀 대기열 제거, 크기 및 높이 지정을 모두 설정하는 방법은 거의 동일하다.

 

차이점

• 컬렉션 뷰는 레이아웃 기능 및 애니메이션과 같은 기타 측면에서 훨씬 더 강력하다.
• 테이블 뷰는 1차원 데이터 행을 표시하는 간단한 목록이다. cell 재사용 및 기타 메서드로 인해 부드럽다.
• 컬렉션 뷰는 다차원 데이터를 표시하기 위한 모델이다. 
• 컬렉션 뷰는 데이터가 화면에 표시되는 방식의 거의 모든 측면, 특히 레이아웃뿐만 아니라 기타 항목을 수정할 수 있는 훨씬 더 강력한 클래스이다.

 

컬렉션 뷰의 장점

1. 컬렉션 뷰의 가장 큰 장점은 가로로 스크롤할 수 있다는 것이다.

 

앱에 여러 열이 필요한 경우 UICollectionView가 가장 좋은 방법이다. 테이블 뷰도 여러 열을 가질 수도 있지만 테이블 뷰에서 데이터를 표시하기 위해 배열을 처리하기 때문에 지저분해진다.

 

2. UICollectionView 복잡한 레이아웃을 지원한다. 

 

Apple은 UICollectionViewDelegateFlowLayout이라는 것을 제공하여 왼쪽과 오른쪽, 위아래의 흐름을 제공한다. UICollectionView는 UITableView에서 수행할 수 없는 다른 레이아웃을 기반으로 하는 사용자 정의 애니메이션을 지원한다. 

 

테이블 뷰의 장점

1. 테이블 뷰는 셀의 자동 크기 조정이 쉽다.

 

UITableView는 각 셀에서 행 높이에 대한 UITableView 자동 치수를 반환하기만 하면 되지만 UICollectionView는 자동 크기 조정이 올바르게 작동하려면 많은 시행착오가 필요하다. 

 

정리

레이아웃에 대한 더 많은 제어가 필요한 경우 UICollectionView를 사용하고 간단한 목록이 필요한 경우 UITableview을 사용하면 된다.

 

 

 

참고

https://zeddios.tistory.com/55

https://guides.codepath.com/ios/Table-View-Guide

https://developer.apple.com/documentation/uikit/uitableview

https://stackoverflow.com/questions/39885395/when-to-use-a-uitableview

https://soojin.ro/blog/uitableview-hype

https://www.iosiqa.com/2018/09/uitableview-and-uicollectionview.html

https://programmingwithswift.com/create-a-uitableview-with-swift/

https://sihyungyou.github.io/iOS-dequeueReusableCell/