[iOS/UIKit] TableView와 CollectionView는 어떤 차이가 있나요?

UIKit을 활용하여 특정 데이터를 리스트 형식으로 나타내고자 할때,

'TableView' 과 'CollectionView' 중 어느 것을 활용해야 할지 고민하기 마련입니다🫨

 

추후 프로젝트를 진행하는데 앞서,

고민할 시간을 줄이고 효율적인 선택을 하기 위해

이번 포스팅에서는 두 컴포넌트의 정의와 기능을 짚고 넘어가볼까 합니다.

 

(각각의 컴포넌트 별 생성과정과 레이아웃 과정은 별도의 포스팅에서 다룰 예정입니다)

 

 

---

 

 

 

리스트를 나타내는 모습 (Overview)

앱의 성격과 디자인을 고려하여 리스트 방식을 나타내는 적절한 View를 선택

 

네트워크에서 받아오거나 혹은 임의로 만든 데이터를

앱의 화면을 통해 보여주고자 할 때,

 

아래와 같이 다양한 형태로 나타낼 수 있습니다.

 

다양한 방식의 데이터 리스트(목록)화

 

앱 혹은 화면(Scene)별 데이터를 전달하고자 하는 성격과 의도가 다양하므로 

 

TableView와 CollectionView에 대한 성격과 기능을 인지한 후,

개발 구상단계에서 적합하고 효율적인 방식을 선택해야 합니다.

 

 

---

 

 

UITableView (테이블 뷰)

하나의 열(column)에 배열된 행(row)으로 구성된 수직 스크롤 뷰

 

테이블 뷰는, 단일 열(column)에 배열된 다수의 행(row)을 사용해 데이터를 표시합니다.

쉽게 말해, iPhone의 설정창의 형태를 떠올리시길 바랍니다.

 

 

주요 특징

• UIScrollView를 상속받는 테이블 뷰는, 수직 스크롤만 가능합니다! 
  • 단일한 열(Column)만을 나타내기 때문에 1차원 적 성격을 가집니다.
  • 스크롤의 범위는 행(row), 즉 콘텐츠의 수에 의하여 결정됩니다.

스크롤 뷰의 특징 - Only 수직 스크롤, 행(콘텐츠)의 갯수에 따른 스크롤 범위 결정

 

• 테이블 뷰는 각 행(row)의 콘텐츠를 표시하는 Cell로 구성됩니다.
  • 이는 테이블 뷰 셀(UITableViewCell) 객체이며, 행(row)의 모습을 그립니다.
    (다시 말해, 셀의 모습을 ➟ 행(row)에 맞춰서 디자인 합니다)
  • header, footer를 활용하여 cell 객체의 추가적인 정보를 나타낼 수 있습니다.

테이블 뷰 타입(plain, grouped, insetGrouped) 및 Cell 객체(row+ header)

 

 

---

 

 

UICollectionView (컬렉션 뷰)

여러개의 열(column)과 행(row)으로 표현할 수 있는 수직/수평 스크롤 뷰

 

컬렉션 뷰는, 테이블 뷰의 기능을 모두 가지는 동시에

다수의 열(column)과 다수의 행(row)을 사용해 데이터를 표시합니다. 

 

좋은 예시로는, 인스타그램의 서치뷰가 있습니다.

 

 

vs 테이블 뷰와의 차이

• 컬렉션 뷰는 다수의 '열'과 '행'을 가지므로, 다양한 모습의 Cell을 만들 수 있습니다. 
  • 테이블 뷰는 하나의 열(column)에 다수의 행(row)을 표시하므로, Cell의 디자인이 매우 한정적입니다.
    (단일한 열을 가지고 있으므로, Cell은 행(가로)의 모습에 맞출 수 밖에 없습니다)
  • 반면, 컬렉션 뷰는 열이 고정되어 있지 않기 때문에, 다양한 모습의 Cell을 디자인합니다.

두 뷰 모두 동일한 데이터이나, 컬렉션 뷰는 열(Column)을 마음대로 커스터마이징 하여 셀을 디자인 할 수 있다

 

 

주요 특징

• 서로 다른 Cell을 하나의 뷰 화면에서 구현함으로서 다채로운 UI를 구성할 수 있습니다.  
  • Cell을 원하는 모양대로 만든 후, 하나의 뷰(ViewController)에서 조합할 수 있습니다.
    (특정 섹션의 header, footer ➟ 커스텀 Cell을 할당하는 방식을 취할 수 있습니다)
  • 해당 Cell은 다른 뷰에서도 활용 가능한 재활용 셀(ReusableCell)로서 사용됩니다.

재활용 가능한 Cell을 생성한 후, 서로 다른 화면에 할당하여 활용할 수 있다.

 

 

---

 

 

 

결과적으로, 구현하고자 하는 리스트(목록)의 성질을 미리 파악한 후,

환경에 맞게끔 효율적인 컴포넌트를 선택하시길 바랍니다.

• 간단한 리스트 형식을 나타낼 땐? ➟ 테이블 뷰(UITableView)
• 다소 복잡한 커스텀 리스트가 필요할 땐? ➟ 컬렉션 뷰(UI CollectionView)