List

1. 정의

💡 List는 하나의 열에 여러개의 행으로 표현되는 UI를 구성해 다중 데이터를 쉽게 나열할 수 있도록 구성된 View이다.

2. 사용예시

아래의 예시처럼 Stack처럼 UI를 감싸주면된다.

3. 동적 컨텐츠

[1. Range<Int>]

List(0..<100) {
    Text("\($0) 인가요")
}

[2. RandomAccessCollection]

해당 방법은 데이터의 각 요소들을 구분하고 식별할 수 있도록 아래의 2가지 방법중 하나를 선택해 id값을 제공해야한다.

id 식별자 지정: id로 사용할 값을 직접 인수로 제공하는 것이다.

- id 매개변수에는 Hashable 프로토콜을 준수하는 프로퍼티를 지정할 수 있으며, 그 데이터 타입 자체가 Hashable을 준수한다면 간단히 self라고 입력해도 사용가능하다.
- 사용자가 정의한 커스텀 타입에서는 Hashable 프로토콜을 채택하는 방법 또는 그런 프로퍼티를 지정해 주는 방법을 사용해야한다.

List(["A", "B", "C", "D", "E"], id: \.self) {...}
List([1, 2, 3, 4, 5], id: \.hashValue) {...}

//해당 값을 사용할 때는 $0을 이용해서 사용

identifiable 프로토콜 채택: 매개변수에 id를 전달하는 대신 데이터 타입 자체에 Swift 5.1에서 추가된 identifiable 프로토콜을 채택하는 것이다.

- 타입 자체에 id 프로퍼티를 만들고 이것을 식별자로 삼게 된다.

struct Animal: Identifiable {
	let id = UUID()
}

List([Animal(name: "Tory"), Animal(name: "Lilly")]) {...}

4. ForEach

// ForEach 사용 O
List {
	ForEach(0..<50) {
    	Text("\($0)")
    }
}

// ForEach 사용 X
List(0..<50) {
    Text("\($0)")
}

그냥 List에 Range를 시용하면 되는데 왜 굳이 ForEach를 사용한 것일까?

-> ForEach를 사용하면 동적 데이터와 정적 데이터를 같이 조합할 수 있기 때문이다.

List {
	Text("정적 데이터")
	ForEach(0..<50) {
    	Text("\($0)")
    }
}

따라서 ForEach를 사용하면 아래처럼 응용이 가능하다.

5. Section

import SwiftUI


struct ContentView: View {
    var body: some View {
        
        let fruits = ["사과", "배", "포도", "바나나"]
        let drinks = ["물", "제로콜라", "몬스터"]
        let proteins = ["닭 가슴살", "연어", "계란", "두부", "목살"]
        let titles = ["음료류", "과일류", "단백질류"]
        let data = [fruits, drinks, proteins]
        
        return List {
            ForEach(data.indices) { index in //data에 포함된 횟수 만큼 섹션 생성
                
                // 섹션 생성
                Section(
                    header: Text(titles[index]).font(.title),
                    footer: HStack {
                        Spacer()
                        Text("\(data[index].count) 건")
                    }
                ) { // 섹션 내부 데이터 생성
                    ForEach(data[index], id: \.self) {
                        Text($0)
                    }
                }
 
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

6. ListStyle

구분	설명
DefaultListStyle	리스트 기본 스타일이다. 사용 환경에 따라 적절한 스타일을 결정합니다.
PlainListStyle	데이터 목록을 각 행마다 하나씩 나열하는 형태의 기본 스타일이다. UITableView에서 Plain을 지정하거나 생략했을 때와 같다. 모든 플랫폼에서 사용가능하다.
GroupedListStyle	각 센션을 분리된 그룹으로 묶어 표현하는 스타일