UIKit에서 TableView와 CollectionView의 차이점은 무엇인가요?

UIKit에서 UITableView와 UICollectionView는 데이터를 표시하기 위한 두 가지 주요 컴포넌트로, 각각 특정한 목적과 방식에 맞게 설계되었습니다. 둘의 차이점을 요약하자면 다음과 같습니다:

1. 레이아웃 구조

• UITableView는 기본적으로 단일 열로 구성되며, 세로 스크롤만 가능합니다. 즉, 데이터를 단순히 세로로 나열할 때 적합합니다.

• UICollectionView는 그리드 형식을 지원하여 다중 열과 행을 구성할 수 있습니다. 또한 가로 및 세로 스크롤을 모두 지원하기 때문에 더 복잡하고 유연한 레이아웃을 표현하는 데 적합합니다.

2. 데이터 구조 및 표현 방식

• UITableView는 섹션과 행으로 구성됩니다. 각 섹션 안에 여러 개의 행이 배치되는 구조이며, 특정 행을 선택하는 didSelectRowAt 메서드를 통해 상호작용을 처리할 수 있습니다.
• UICollectionView는 섹션과 아이템으로 구성되며, 행과 열로 이루어진 다양한 레이아웃이 가능합니다. 유연한 레이아웃을 구현할 수 있기 때문에 이미지 그리드, 카테고리 리스트 등 다양한 데이터 시각화에 적합합니다.

3. 레이아웃 커스터마이징

• UITableView는 레이아웃이 고정되어 있고, 크게 커스터마이징할 필요 없이 표 형태의 데이터를 쉽게 표시할 수 있습니다.
• UICollectionView는 UICollectionViewLayout 및 UICollectionViewFlowLayout을 사용해 레이아웃을 유연하게 변경할 수 있어, 복잡한 그리드 및 맞춤형 레이아웃을 구현할 수 있습니다.

4. 성능

• UITableView는 단순한 스크롤링 데이터 구조를 가질 때 성능이 좋습니다. 기본적인 목록 형태로 많은 양의 데이터를 효율적으로 처리할 수 있습니다.
• UICollectionView는 더 많은 데이터나 복잡한 레이아웃을 처리하기 위한 다양한 옵션을 제공하지만, 최적화가 필수입니다. 특히 그리드 형식의 레이아웃은 많은 셀을 표시할 때 성능에 영향을 줄 수 있으므로 적절한 메모리 관리가 필요합니다.

5. 사용 예시

• UITableView는 메시지 목록, 설정 화면, 이메일 목록 등 단일 열의 단순한 목록 데이터를 표시할 때 자주 사용됩니다.
• UICollectionView는 이미지 갤러리, 상품 목록, 카테고리 선택 화면 등 다양한 형식의 데이터를 표시할 때 유용합니다.

요약하자면, 단순한 목록을 표시할 때는 UITableView가 적합하고, 복잡한 그리드나 다양한 레이아웃을 표시할 때는 UICollectionView가 더 적합합니다.

 

 

셀(Cell)의 재사용(Reusability)은 어떻게 구현되나요?

UITableView와 UICollectionView는 모두 셀의 재사용을 통해 성능을 최적화하는 방식이 유사하지만, 구성 요소와 사용 방식에 몇 가지 차이점이 있습니다.

 

1. 재사용 원리

• UITableView와 UICollectionView는 모두 재사용 큐(reuse queue)를 활용해 스크롤할 때 화면에서 벗어난 셀을 대기열에 저장하고, 새로운 데이터로 재사용합니다.
• 이 방식을 통해 메모리 사용량을 줄이고, 특히 많은 데이터를 스크롤할 때 새로운 셀을 생성하지 않아 성능을 높일 수 있습니다.

 

2. 셀 등록 방법

• UITableView에서는 셀을 등록할 때 register(_:forCellReuseIdentifier:) 메서드를 사용하여 셀을 등록합니다.

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "TableCellIdentifier")

 

• UICollectionView도 유사하게 register(_:forCellWithReuseIdentifier:) 메서드를 사용하여 셀을 등록합니다.

collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "CollectionCellIdentifier")

• 이 과정에서 재사용 식별자(reuse identifier)를 지정하며, 이를 통해 셀을 재사용할 때 식별할 수 있습니다.
  
  

 

3. 셀을 가져오는 방법

• UITableView는 dequeueReusableCell(withIdentifier:) 메서드를 사용해 셀을 가져옵니다.

let cell = tableView.dequeueReusableCell(withIdentifier: "TableCellIdentifier", for: indexPath)

 

• UICollectionView는 dequeueReusableCell(withReuseIdentifier:for:) 메서드를 사용하여 셀을 가져옵니다. 이때 반드시 indexPath를 함께 전달해야 합니다.

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCellIdentifier", for: indexPath)

 

 

4. 셀의 구조 및 유연성

• UITableView는 일반적으로 단일 열 구조로 세로 방향으로만 스크롤되는 목록에 적합합니다.
• UICollectionView는 여러 열과 행을 지원하며, 가로 및 세로 스크롤 모두 가능해 더 다양한 레이아웃을 구성할 수 있습니다.
• 따라서 UICollectionView는 그리드 레이아웃을 지원하기 위해 UICollectionViewLayout을 사용해 레이아웃을 설정하고, 각 셀의 위치를 지정합니다.

 

5. 보조 뷰(Supplementary Views)의 재사용

• UITableView에서는 보조 뷰로 섹션 헤더와 푸터만 제공하며, 이를 위해 viewForHeaderInSection와 viewForFooterInSection 메서드를 사용합니다.
• UICollectionView는 섹션 헤더와 푸터 외에도 다양한 보조 뷰를 지원합니다. dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:) 메서드를 통해 헤더, 푸터 등 보조 뷰를 재사용할 수 있습니다.
• 이로 인해 UICollectionView는 다채로운 레이아웃과 복잡한 뷰 계층을 지원하는 데 더 유리합니다.

 

6. 데이터 업데이트와 애니메이션

• UITableView와 UICollectionView는 모두 reloadData()를 호출하여 전체 데이터를 새로고침할 수 있지만, 성능을 위해 필요한 항목만 갱신하는 reloadRows(at:) 및 reloadItems(at:) 메서드를 사용할 수 있습니다.
• UICollectionView는 performBatchUpdates(_:completion:) 메서드를 통해 다양한 삽입, 삭제, 이동 작업을 하나의 애니메이션 블록에서 처리할 수 있습니다.

 

요약

• UITableView는 단순한 세로 목록에 적합하며, UITableViewCell을 재사용하여 메모리 효율성을 높입니다.
• UICollectionView는 다중 행과 열을 지원하는 유연한 레이아웃을 제공합니다. UICollectionViewCell뿐만 아니라 다양한 보조 뷰도 재사용할 수 있어 복잡한 레이아웃에도 적합합니다.

 

동적인 셀 높이(Dynamic Cell Height)를 설정하는 방법은 무엇인가요?

 

1. UITableView에서 동적 셀 높이 설정

UITableView에서는 셀의 내용에 따라 셀 높이를 자동으로 조정할 수 있습니다. 아래는 동적 셀 높이를 설정하는 주요 단계입니다.

• UITableView의 rowHeight를 UITableView.automaticDimension으로 설정합니다.
• estimatedRowHeight를 설정하여 높이 추정값을 제공합니다.

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 100 // 대략적인 높이 추정값

 

• 셀 내부에 표시할 콘텐츠에 오토 레이아웃을 설정해야 합니다. 모든 뷰의 상하좌우 제약 조건이 명확하게 설정되어야 자동으로 셀 높이가 조정됩니다. 예를 들어, UILabel이나 UIImageView가 있는 경우 상하 제약 조건을 설정하면, 내용에 맞춰 셀 높이가 조정됩니다.
• 셀 높이가 자동으로 조정되므로 tableView(_:heightForRowAt:) 메서드를 구현할 필요가 없습니다. 오토 레이아웃이 셀의 높이를 자동으로 계산합니다.

 

2. UICollectionView에서 동적 셀 높이 설정

 UICollectionView에서는 셀의 높이를 설정하기 위해 UICollectionViewFlowLayout 또는 커스텀 레이아웃을 사용해야 합니다. 각 셀의 내용에 따라 셀의 높이를 동적으로 조정할 수 있도록 코드를 작성합니다.

 

 UICollectionViewDelegateFlowLayout 프로토콜의 collectionView(_:layout:sizeForItemAt:) 메서드를 사용하여 셀 크기를 동적으로 설정할 수 있습니다. 각 셀에 필요한 콘텐츠의 높이를 계산하고, 해당 크기를 반환합니다.

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 예: UILabel의 텍스트 길이에 따라 셀 높이를 조정
        let width = collectionView.frame.width
        let dummyLabel = UILabel()
        dummyLabel.text = data[indexPath.row]
        dummyLabel.numberOfLines = 0
        dummyLabel.lineBreakMode = .byWordWrapping
        let targetSize = CGSize(width: width, height: UIView.layoutFittingCompressedSize.height)
        let estimatedSize = dummyLabel.systemLayoutSizeFitting(targetSize)
        return CGSize(width: width, height: estimatedSize.height)
    }
}

 

• 셀 내부에 있는 모든 요소의 제약 조건을 설정해주어야 합니다. 예를 들어, UILabel이 셀 높이에 맞게 늘어나도록 상하좌우 제약을 설정해야 합니다. 이렇게 하면 셀의 높이가 자동으로 계산된 크기에 맞춰집니다.

 

3. 셀 높이를 설정할 때 고려사항

• 성능 최적화: 높이 계산이 빈번히 발생하는 경우, 성능에 영향을 줄 수 있습니다. estimatedRowHeight를 설정하여 UITableView가 스크롤할 때 추정 높이를 먼저 사용하게 하여 성능을 높일 수 있습니다.
• 캐싱 사용: 셀 높이를 미리 계산해 캐싱해 두면 스크롤 성능이 향상됩니다.

 

 

CollectionView의 레이아웃을 커스터마이징하는 방법은 무엇인가요?

 

1. UICollectionViewFlowLayout 수정

가장 간단한 방법으로, UICollectionViewFlowLayout을 사용하여 레이아웃을 커스터마이징할 수 있습니다. UICollectionViewFlowLayout은 기본적으로 그리드나 리스트 레이아웃을 제공하므로 이를 기반으로 크기나 간격을 조정할 수 있습니다.

• itemSize: 각 셀의 크기를 설정합니다.
• minimumInteritemSpacing: 셀 간의 가로 간격을 설정합니다.
• minimumLineSpacing: 셀 간의 세로 간격을 설정합니다.
• scrollDirection: 스크롤 방향을 설정합니다. (가로: .horizontal, 세로: .vertical)
• sectionInset: 각 섹션의 여백을 설정합니다.

let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 100, height: 100)
layout.minimumInteritemSpacing = 10
layout.minimumLineSpacing = 20
layout.scrollDirection = .vertical
layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
collectionView.collectionViewLayout = layout

 

Delegate 사용

UICollectionViewDelegateFlowLayout 프로토콜을 채택해 각 셀의 크기나 간격을 동적으로 설정할 수도 있습니다.

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

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

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

 

 

2. UICollectionViewCompositionalLayout 사용 (iOS 13 이상)

UICollectionViewCompositionalLayout은 더 복잡한 레이아웃을 만들기 위해 iOS 13부터 도입된 기능입니다. 다양한 섹션 레이아웃을 손쉽게 정의할 수 있도록 도와줍니다.

• NSCollectionLayoutItem: 단일 아이템(셀)의 크기를 정의합니다.
• NSCollectionLayoutGroup: 여러 아이템을 그룹으로 묶어 배치할 수 있습니다.
• NSCollectionLayoutSection: 그룹을 사용해 섹션을 정의하며, 섹션마다 다른 레이아웃을 지정할 수 있습니다.
• NSCollectionLayoutSize: 아이템과 그룹의 크기를 설정합니다. 상대적(비율) 또는 절대적(고정값) 크기를 지정할 수 있습니다.

let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .fractionalHeight(1.0))
let item = NSCollectionLayoutItem(layoutSize: itemSize)

let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(0.2))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = 10
section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)

let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout

 

 

 

3. UICollectionViewLayout 서브클래싱

더 복잡하고 유연한 레이아웃이 필요할 때는 UICollectionViewLayout을 서브클래싱하여 직접 커스터마이징할 수 있습니다. 이 방법은 많은 코드가 필요하지만, 가장 높은 수준의 커스터마이징이 가능합니다.

• prepare(): 레이아웃 속성을 설정하는 초기화 메서드입니다. 레이아웃에 필요한 데이터나 계산을 준비합니다.
• layoutAttributesForElements(in:): 주어진 영역에 표시될 아이템들의 레이아웃 속성을 반환합니다.
• layoutAttributesForItem(at:): 특정 아이템의 레이아웃 속성을 반환합니다.
• shouldInvalidateLayout(forBoundsChange:): 레이아웃을 갱신할 조건을 지정합니다.
  

class CustomLayout: UICollectionViewLayout {
    private var cache: [UICollectionViewLayoutAttributes] = []

    override func prepare() {
        guard let collectionView = collectionView else { return }
        
        cache.removeAll()
        let itemWidth: CGFloat = collectionView.bounds.width / 3
        var xOffset: CGFloat = 0
        var yOffset: CGFloat = 0

        for item in 0..<collectionView.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: item, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = CGRect(x: xOffset, y: yOffset, width: itemWidth, height: itemWidth)
            cache.append(attributes)
            
            xOffset += itemWidth
            if xOffset >= collectionView.bounds.width {
                xOffset = 0
                yOffset += itemWidth
            }
        }
    }

    override var collectionViewContentSize: CGSize {
        return CGSize(width: collectionView!.bounds.width, height: CGFloat(cache.count / 3) * collectionView!.bounds.width / 3)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return cache.filter { $0.frame.intersects(rect) }
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cache[indexPath.item]
    }
}

 

 

요약

• UICollectionViewFlowLayout 수정: 기본적인 그리드와 간단한 리스트 레이아웃을 쉽게 설정할 수 있습니다.
• UICollectionViewCompositionalLayout: iOS 13 이상에서 지원하며, 다채로운 섹션별 레이아웃 구성을 손쉽게 구현할 수 있습니다.
• UICollectionViewLayout 서브클래싱: 가장 유연한 방법으로, 복잡한 커스텀 레이아웃을 직접 구현할 수 있습니다.