[Swift][UIKit] UICollectionView, UITableView 차이 및 각 프로토콜 알아보기

제대로 된 공부 없이 주먹구구식으로 공모전을 진행하다 보니 UITableView랑 UICollectionView의 차이도 모르고 마구잡이로 쓰고있었다.

그래서 알아보는 스크롤 가능한 두 뷰의 차이를 알아보고, 각각의 프로토콜도 알아보도록 하자.

---

주요 차이점 요약

카테고리	UITableView	UICollectionView
레이아웃	단일 열, 주 기능은 세로 스크롤	유연한 레이아웃, 세로 및 가로 스크롤 모두 지원, 커스텀 레이아웃 가능
구조	Section과 Row로 구성	Cell, Section, Supplementary View, Decoration View로 구성
용도	간단한 리스트나 테이블 형태의 데이터 표시	Grid, 수평 스크롤 등 더 복잡한 레이아웃의 데이터 표시

간단하고 깔끔한 리스트는 UITableView를, 복잡한 레이아웃이 필요할 때는 UICollectionView를 사용해서 구성하도록 하자.

---

UITableView

• 사용 예제: 연락처 목록, 설정 화면, 이메일 목록 등
• 데이터 소스 및 델리게이트: UITableViewDataSource, UITableViewDelegate 프로토콜을 통해 데이터 관리와 사용자 인터랙션 처리

UITableViewDelegate

테이블 뷰의 행에 대한 상호작용 관리 - 클릭 후 처리, 행 높이 설정, 섹션 헤더 및 푸터 뷰 설정 등

• 테이블 뷰의 행을 클릭할 때:

  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      // cell 클릭시 동작 처리
  }

• 테이블 뷰의 행 높이 설정:

  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
      return 44.0 // 행 높이 설정
  }

• 섹션 헤더 뷰 및 푸터 뷰 설정:

  func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
      // 섹션 header 뷰 반환
  }
  
  func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
      // 섹션 footer 뷰 반환
  }

UITableViewDataSource

테이블 뷰에 데이터 제공하는 메서드 정의 - 행의 수, 행에 들어갈 데이터, 섹션 수 등

• 테이블 뷰의 행 수 설정:

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

• 각 행에 대한 데이터 제공:

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
      cell.textLabel?.text = data[indexPath.row] // 셀에 데이터 설정
      return cell
  }

• 섹션 수 설정:

  func numberOfSections(in tableView: UITableView) -> Int {
      return 1 // 섹션 수 반환
  }

UICollectionView

• 사용 예제: 이미지 갤러리, 그리드 형식의 데이터 리스트, 맞춤형 레이아웃 등.
• 레이아웃: UICollectionViewFlowLayout을 사용하여 다양한 레이아웃을 구현 가능. 세로, 가로, Grid 등 다양한 스크롤 방향 및 뷰를 사용한 유연한 레이아웃 지원
• 데이터 소스 및 델리게이트: UICollectionViewDataSource, UICollectionViewDelegate 프로토콜을 통해 데이터 관리와 사용자 인터랙션 처리

UICollectionViewDelegate

컬렉션뷰 상호작용 관리 - 셀 클릭, 셀 강조 표시, 셀 선택 해제 등

• 컬렉션 뷰 셀 클릭시:

  func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
      // cell 클릭시 실행할 동작 
  }

• 셀 강조 표시:

  func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
      // cell 터치시 효과 설정
  }

UICollectionViewDataSource

컬렉션뷰에 데이터 제공 - 셀의 수, 데이터, 섹션의 수 등을 설정

• 컬렉션 뷰의 아이템 수 설정:

  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
      return data.count // 데이터 배열의 요소 수 반환
  }

• 각 셀에 대한 데이터 제공:

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
      let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
      // 셀에 데이터 설정
      return cell
  }

• 섹션 수 설정:

  func numberOfSections(in collectionView: UICollectionView) -> Int {
      return 1 // 섹션 수 반환
  }

UICollectionViewDelegateFlowLayout

UICollectionViewFlowLayout 객체와 상호작용하여 레이아웃을 조정 - 셀의 크기, 셀 간의 간격, 섹션의 인셋 등을 설정 (선택사항)

• 셀 크기 설정:

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      return CGSize(width: 100, height: 100)
  }

• 셀 간 최소 간격 설정 (수평):

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
      return 10.0
  }

• 셀 간 최소 간격 설정 (수직):

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
      return 10.0 
  }

• 섹션 인셋 설정:

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
      return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
  }