[SwiftUI] 리스트의 섹션(Section)이란?

안녕하세요, HoonIOS입니다. 

리스트에는 섹션이라는 구조체가 존재 합니다.

 

섹션을 이용하면 데이터를 쉽게 그룹화 하는것도 가능합니다.

 

 섹션(Section)의 구조체 형태

strcut Section<Parent, Content, Footer> {}

 

섹션에는 헤더와 푸터를 생략할수도 있고 둘중 하나만 선택해서 사용을 할수 있습니다.

 

이때 헤더, 푸터 모두 뷰여서 커스텀을 통해 원하는 뷰를 구성후 전달을 할수 있습니다.

 

섹션의 header, footer를 구성하는 방법에 대해 한번 살펴보겠습니다.

 

 섹션(Section) 구성 예제

    let data1 = ["데이터 1", "데이터 2", "데이터 3", "데이터 4"]
    let data2 = ["데이터 5", "데이터 6", "데이터 7", "데이터 8"]

    var body: some View {
        let sectionHead = ["섹션 1", "섹션 2"]
        let footerHead = [data1, data2]
        
        return List {
            ForEach(footerHead.indices) { index in
                Section(header: Text(sectionHead[index]).font(.title),
                        footer: HStack{ Spacer(); Text("\(footerHead[index].count)수") }
                )  {
                    ForEach(footerHead[index], id: \.self) {
                        Text($0)
                    }
                }
            }
        }
    }

 

• 두개의 섹션과 각 섹션 별 5개의 데이터를 구성하는 리스트뷰를 구성해봤습니다.
• 이 예제의 핵심은 Section(header:, footer:)의 struct를 통해 header와 footer를 설정한것입니다.
• header는 sectionHead배열의 index를 섹션 주소로 설정했습니다.
• footer는 footerHead배열에 갯수만큼 설정해 주었습니다.
• UIKit으로 설정해줄때는 UITableViewDataSource프로토콜을 통해 헤더뷰와 푸터뷰를 등록 및 관리를 했지만 SwiftUI에서는 struct를 통해서 설정을 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

간단하게 섹션 정의랑 표현 방법에 대해 포스팅했는데 다음에는 리스트를 커스텀하게 꾸미는 부분에 대해 살펴보겠습니다.