TableView vs CollectionView
한 화면에 여러 개의 분리된 공간을 나타내야 할 때, 우리는 웹에서 페이징 같은 방식을 사용해 왔다. 그러나 수직 공간을 엄지로 스크롤 할 수 있는 휴대 전화 화면의 경우 스크롤 뷰가 더욱 보편적이다. 오늘은 스크롤 뷰 중 대표적인 두 가지에 대해 비교해 보겠다.
공통점
- UIScrollView(Bounds 이용 - Bounds가 궁금하다면 클릭!)를 상속받는 서브 클래스
- Cell을 기반으로 여러 데이터를 표현할 수 있는 View
- 즉, 2차원으로 놓여진 무작위 아이템
두 가지 다 UIKit 중 UIScrollView를 상속받은 뷰이다. UIScrollView를 상속받은 뷰는 이것들 외에도 UITextView 등이 있으며, 오늘 설명할 Cell 기반의 2차원 아이템 스크롤 뿐만 아니라 사진 등의 확대 축소에도 사용된다. 한정된 공간 속에서 시점 변환을 통해 큰 화면을 보여주는 형식이기 때문에 Bounds를 이용하게 된다.
Cell Reuse (셀 재사용)
- 스크롤을 하는 동안 반복적으로 셀을 재사용 (새로운 셀을 만드는 형식이 아님)
- 따라서 Queue 구조로 구현되어 있음 (사용한 뷰를 이후 다시 사용하고, 다시 사용하고)
reloadData()
- 모델이 변경될 때 보여지는 셀에 다시금 데이터를 뿌려주는 함수!
한정된 개수의 셀들이 화면에 주어지고, 해당 셀들에 데이터를 다시금 뿌려주는 형식으로 구현되어 있기 때문에 두 가지를 짚고 넘어가는 것이 중요하다.
하나는 셀을 새롭게 만드는 것이 아니라 큐 구조를 통해 몇 가지 셀을 재사용한다는 것이고, 다른 하나는 reloadData라는 메서드를 통하여, 나타나는 셀에 다시금 데이터를 뿌려준다는 것이다.
1. TableView
- 목록! (주로)
- 하나의 열에 여러 행의 Cell(정보)이 나열된 형태 - 1차원
- 수직 스크롤 가능
- 기본 제공 스타일 존재 : 셀의 모양이 고정되는 단점 / 간단한 목록의 데이터 표현
- 그룹 단위 섹션 분리 가능! 각 섹션에 헤더와 푸터 지정도 가능
- 단, 데이터가 고정(static)될 때만 사용 (무작위 - arbitrary 정보 시 사용 금지)
- 대표적인 예시로 연락처 / 설정 화면이 있음
Static Table View
- 고정된 개수 -> cellForRowAt이나 개수를 세는 함수 불필요
- 스토리보드의 컨트롤러에 행의 데이터를 직접 작성
TableView는 주로 목록에 이용된다. 우리가 자주 사용하는 연락처 화면이나 설정 화면 등이 TableView로 구현되어 있다.
열 하나에 여러 개의 셀이 나열된 형태이며, 수직으로 스크롤이 가능하다. 우리가 설정 화면에서 보는 화면이 기본 제공 스타일이 되겠다. 보다 자율성은 떨어지겠지만, 오히려 단순한 형태가 필요할 때 이 제약은 장점이 된다.
셀의 개수가 무한대일 때는 무한 스크롤이 필요해 개수도 세야 하고, 몇 번째인지 계속 인덱스를 확인해 주어야겠지만, Static Table View는 다르다. 고정된 개수가 있다. 우리가 설정 화면에서 보게 되는 것이 Static Table View일 것이다.
2. CollectionView
- 다수의 열 가능 - 2차원 (TableView의 기능 전부 포함)
- 수직을 비롯, 수평 스크롤도 가능
- 기본적 스타일은 제공하지 않음 : 셀의 모양이 고정되지 않아 다양한 커스터마이징 가능
- 레이아웃 객체를 통해 원하는 모양으로 레이아웃 커스텀도 가능
- TableView의 섹션 분리 전부 가능
- 그룹 단위 섹션 분리 가능! 각 섹션에 헤더와 푸터 지정도 가능
다음으로 CollectionView의 경우, 하나의 열이 반복되는 것이 아니라 다수의 열을 그릴 수 있다.
수직 스크롤만 가능한 Table View와는 달리 수평 스크롤도 지원하며, 기본적 스타일을 지원하지 않기 때문에 사용자가 다양한 시도를 해 볼 수 있다는 자유로움이 있다.
두 가지 중 어느 것을 언제 써야 한다는 규칙은 없다. 보여 줘야 할 데이터의 특성과 앱의 상황에 따라 두 가지 중 어느 것이 적합할지 고민해 보고, 보다 걸맞은 것을 그때의 상황에 맞춰 사용하는 것이 가장 적절할 것이다.