---
# System prepended metadata

title: CollectionView ✨

---

## 1️⃣ **CollectionView**와 **TableView**의 차이점이 무엇인가⁉️

### ⚙️ 공통점
- 재사용 셀: 셀을 재사용하여 메모리를 효율적으로 관리
- Delegate, DataSource 패턴: `DataSource`를 활용하여 셀의 데이터를 제공하고, `Delegate`로 사용자와의 상호작용에 대응
- 셀 커스터 마이징 
- 헤더, 푸터 지원

### ✂️ 차이점
||테이블 뷰|컬렉션 뷰|
|----|:------------------:|:---------:|
|객체 구성|셀,<br> 데이터 소스 객체,<br> 델리게이트 객체,<br> 테이블뷰 컨트롤러|셀,<br> 레이아웃,<br> 데이터 소스 객체,<br> 델리게이트 객체,<br> 컬렉션뷰 컨트롤러|
|데이터 표현 방식|단일 열로 데이터 표시|그리드 방식으로 데이터 표시|
|Layout|단일 열로 구성,<br> 커스텀 불가능|사용자가 레이아웃을 지정해줄 수 있음(셀 겹치기도 가능),<br>커스텀 가능|
|스크롤 방향|수직 방향|수직, 수평 모두 가능|



<br>

## 2️⃣ 각 앱의 화면을 테이블뷰로 구현하는 것이 좋을지, 컬렉션뷰로 구현하는 것이 좋을지 그 이유에 대해 의논해봅시다🤔

### ✨ 페이스북 - 타임라인
<img src="https://hackmd.io/_uploads/H1JMw9ic2.png" width="200"/>

- 횡방향 스크롤
- 열이 한개
- 셀이랑 셀 사이 spacing

>**테이블 뷰** ‼️

### ✨ 인스타그램 - 타임라인
<img src="https://hackmd.io/_uploads/HyHgP5jch.png" width="200"/>
- 횡방향 스크롤

>**테이블 뷰** ‼️


### ✨ 미리 알림 앱
1. 메인
<img src="https://hackmd.io/_uploads/HkLV_cs5h.png" width="200"/>

- 횡방향 스크롤
- 열이 한개
>**컬렉션뷰 or 컬렉션뷰 + 테이블뷰** ‼️

2. 미리 알림 목록화면
<img src="https://hackmd.io/_uploads/HkIB_qs5n.png" width="200"/>

- 횡방향 스크롤
- 열이 한개
>**테이블뷰** ‼️


### ✨ iPhone App Store의 투데이 화면

<img src="https://media.discordapp.net/attachments/1132679667434926160/1132921839354642472/IMG_3224.png?width=308&height=666" width="200"/>

- 횡방향 스크롤
- 열이 한개
>**테이블뷰** ‼️

### ✨ 시계 앱의 알람 목록화면

<img src="https://cdn.discordapp.com/attachments/1132679667434926160/1132922784926937099/IMG_3226.png" width="200"/>

- 횡방향 스크롤
- 열이 한개
>**테이블뷰** ‼️