List Section

• Section Header 및 Footer를 나타 낼 수 있음.

struct Animal: Identifiable {
    let id = UUID()
    let name: String
    let index: Int
}

...
    var animalList = [
        Animal(name: "dog", index: 1),
        Animal(name: "cat", index: 5),
        Animal(name: "dog", index: 2),
        Animal(name: "cat", index: 4),
        Animal(name: "dog", index: 3),
        Animal(name: "cat", index: 7),
        Animal(name: "bird", index: 8),
        Animal(name: "cat", index: 6),
        Animal(name: "bird", index: 9)
    ]

위 데이터를 Section Header를 name으로 구분하기 위해 데이터 정제가 필요

...
1	var animalGrouped: [String : [Animal]] {
2		var groupData = Dictionary(grouping: animalList) { $0.name }
3		
4		for (key, value) in groupData {	
5			groupData[key] = value.sorted(by: { $0.index < $1.index })
6		}
7		return groupData
8	}
9
10	var groupKey : [String] {
11		animalGrouped.map( { $0.key } )
12	}
...

animalGrouped는 Dictionary로 Animal.name로 그룹화 한 데이터 4 ~ 6행은 데이터 정렬을 하기위함.

해당 데이터를 View에 표현하는 코드는 아래와 같다.

...
    var body: some View {
        List{
            ForEach(groupKey, id: \.self) { animalKey in
                Section(header: Text("\(animalKey)")) {
                    ForEach(animalGrouped[animalKey]!) { animal in
                        HStack {
                            Text("\(animal.name)")
                            Text("\(animal.index)")
                        }
                    }
                }
            }
        }
    }
...

groupKey는 단순히 Dictionary의 key를 map을 통해 리트화 시킨 변수이고, 리스트이므로 Hashable를 갖는다. 따라서 id: \.self를 사용할수 있다.

위 코드는 Animal.name을 section으로 잡은 리스트 뷰를 나타낸다.