tableView VS collectionView 언제 뭘 사용해야 할까?

 

여러 개의 cell을 보여줄 때는 주로 자유도가 높아 커스텀하기 좋은 collectionView를 사용한다고 들었는데, 

 

어떨 때 tableView로 구성해야 하는지, 어떨 때 colletionView로 구성해야하는지에 대해 알아보기 위해 

테이블뷰와 컬렉션뷰의 장단점을 찾아보다가 정리하게 되었다.

 

 

 

tableView 란?

ios UITableView declaration

단일 열에 배열된 행을 사용해 데이터를 표시하는 뷰이다.

@MainActor class UITableView : UIScrollView

• UIScrollView를 상속 받고 있다.
• 보통 목록을 스타일을 구현할 때 사용되고, 수직 스크롤만 가능하다.
• 테이블의 개별 항목을 구성하는 cell은 UITableViewCell 이다.
• indexPath값을 통해 cell을 구분한다.
• 여러 행은 하나의 섹션 안에 구성될 수 있고, 각 섹션은 헤더와 푸터를 가질 수 있다.

 

 

 

 

테이블 뷰는 plain, grouped 두 가지 스타일을 가질 수 있다.

 

아이폰 기본앱으로 설명하자면, 

연락처, 설정앱 등을 예로 들 수 있다.

iphone image - tableView example

** 테이블 뷰를 사용하려면 datasource, delegate 가 필요하다. (UITableViewDataSource, UITableViewDelegate 프로토콜을 구현해야 한다.)

• datasource : 테이블뷰가 테이블을 만들 때 필요한 정보를 제공하고, 테이블의 행의 추가/삭제/재정렬할 때 데이터 모델을 관리한다.
• delegate : 화면에 보이는 모습과 행동을 담당한다. ( 몇개의 행을 보여줄 건지, 특정 행 선택시 이벤트 등 )

 

tableView protocol

-> 스토리보드에서 UITableViewController를 이용하면 쉽게 테이블뷰를 만들 수 있다.

런타임에 tableViewController는 테이블뷰를 만들고, datasoure/delegate를 자기 자신으로 할당한다!

 

 

 

 

tableView의 장점

• cell을 재사용할 수 있어, cell을 초기화하는 부담을 줄일 수 있다.
• 메모리를 절약하여 많은 데이터를 효율적으로 표시할 수 있기 때문에, 단순한 항목을 표시할 때는 tableView로 충분하다.

 

 

tableView의 한계

• 하지만, 읽지 않은 메세지를 표시하는 것과 같은 여러 디자인 요소를 추가하고 싶거나, section header나 footer 외 다른 곳에 날씨를 표시하고 싶을 때는 별로...
• cell 내부에 뷰를 별도로 추가하여 표시 or 강제로 섹션을 나누는 등 트릭이 필요하다.
• 표시하려는 cell을 반환하기 전에 메세지 크기에 많은 cell의 높이를 미리 계산하여 UITableView에 전달해야 한다.
• 성능을 향상시키려면 별도의 캐시를 마련하여 cell의 높이를 관리해야 하는 등 추가 작업이 필요하다.

 

 

 

 

 

 

 

 

 collectionView 란?

ios UICollectionView decalaration

여러 데이터를 관리하고 커스텀 가능한 레이아웃을 사용해서 사용자에게 보여줄 수 있는 객체이다.

@MainActor class UICollectionView : UIScrollView

• UITableView와 마찬가지로 UIScrollView를 상속 받고 있다. 
• 컬렉션 뷰는 테이블뷰에서 할 수 있는 모든 것을 할 수 있다!
• 섹션을 가질 수 있고, indexPath값을 이용하여 cell을 구분한다.
• 컬렉션의 개별 항목을 구성하는 cell은 UICollectionViewCell 이다.

 

컬렉션 뷰를 사용하려면 마찬가지로 datasource, delegate 가 필요하다. (UICollectionViewDataSource, UICollectionViewDelegate 프로토콜을 구현해야 한다.)

 

 

 

 

 

 

 

거의 비슷한데, tableView와 collectionView의 가장 큰 차이점은??

 

cell 이다!!

테이블뷰에서는 하나의 열에 여러 행의 cell을 표현하는 방식이기에, cell의 모양은 항상 row에 맞춰 디자인 해야한다.

하지만 컬렉션뷰는 행과 열을 모두 만들 수 있기 때문에 cell의 모양을 자유롭게 디자인이 가능하다.

 

 

 

 

그렇기 때문에

tableView에서는 cell을 수직으로만 스크롤이 가능했다면,

collectionView에서는 수직/수평 스크롤을 모두 할 수 있다.

 

 

 

 

같은 데이터를 표현하더라도 cell의 디자인 방식에 따라 UX가 달라진다.

tableView와 collectionView로 구성했을 때의 차이를 아래의 그림을 통해 확인할 수 있다.

 

image from brandi labs link(http://labs.brandi.co.kr/2018/05/02/kimjh.html)

 

 

 

 

 

또 다른 차이점은 컬렉션 뷰는 레이아웃 객체가 있다.

기존에 제공하는 flow layout을 사용해도 되지만,

UICollectionViewDelegateFlowLayout 프로토콜을 통해 본인이 원하는 모양으로 레이아웃을 커스텀해서 사용할 수도 있다.

 

 

 

 

 

 

 

 

tableView VS collectionView

• UITableView에서 구현하기 어려웠던 여러 가지 레이아웃 커스터마이징 기능을 제공한다.
• 별도로 레이아웃 서브클래스를 만들지 않고, UICollectionViewFlowLayout을 사용하는 것만으로도 기본적인 그리드 레이아웃을 구현할 수 있다.
• 좀 더 세밀하게 레이아웃을 제어할 필요가 있을 땐, 서브 클래스를 만들어 구현하는 것도 가능하다.

→ UICollectionViewLayout의 서브클래스를 만들어 구현할 경우, 특정 화면 영역이나 IndexPath에 대한 레이아웃 속성을 요청하면 이를 제공하여 개발자가 원하는 형태로 cell과 보충 뷰의 레이아웃을 구현할 수 있도록 한다.

 

 

 

 

 

 

 

그래서 무엇을 어떨 때 사용해야 하는가?

결국 앱도 사용자를 위해 만드는 것이고, 사용자가 있어야 의미가 있기 때문에

앱을 기획하고 디자인할 때 UX적인 측면에 따라 골라 사용해야 하는것 같다.

어떤게 더 좋고 말고가 아니라 상황에 따른 선택인 듯하다.

 

즉, 구현해야할 목록이나 보여주어야 할 데이터가 얼마나 복잡한지에 따라 달라지는 것 같다.

테이블뷰는 간단하고 보편적인 리스트를 만들어 보여줄 수 있는 반면,

컬렉션뷰는 특정한 모습으로 커스텀한 목록을 만들어 보여줄 수 있다.

 

collectionView가 tableView의 모든 것을 구현할 수 있다고 하지만,

연락처 같은 앱의 경우는 굳이 collectionView를 사용해서 구현할 필요는 없기에..!

 

 

 

 

 

간단한 데이터만 보여줘도 된다면 테이블뷰만 사용해도 충분하고,

셀의 모양을 커스텀하길 원하거나,

나중에 디자인의 수정 가능성이 높다면 collectionView를 사용하도록 하자~_~

 

 

 

 

 

 

틀린부분이 있거나, 더 좋은 방법이 있다면 댓글로 남겨주세요! 
🌈댓글은 언제나 환영입니다🙏🏻

 

 

 

 

 

 

참고자료 링크

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

Apple Developer Documentation

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

Apple Developer Documentation

https://engineering.linecorp.com/ko/blog/ios-refactoring-uicollectionview-1/

UICollectionView를 이용한 LINE iOS 대화방 리팩토링 - 1 - LINE ENGINEERING

https://engineering.linecorp.com/ko/blog/ios-refactoring-uicollectionview-2/

UICollectionView를 이용한 LINE iOS 대화방 리팩토링 - 2 - LINE ENGINEERING

http://labs.brandi.co.kr/2018/05/02/kimjh.html

테이블이냐, 컬렉션이냐, 그것이 문제로다!(KOR)