Swift List, LazyHStack 차이점 알아보기

List, LazyHStack 차이점 알아보기

HStack

• 초기화 시점에 모든 View를 생성한다.
• Cell의 개수가 10개를 넘으면 컴파일 에러가 난다.

// HStack

struct SampleHStack: View {
    var body: some View {
        HStack {
            Text("HStack")
            Text("HStack")
            Text("HStack")
            Text("HStack")
            Text("HStack")
        }
    }
}

struct SampleHStack_Preview: PreviewProvider {
    static var previews: some View {
        SampleHStack()
    }
}

LazyHStack

• 초기화 시점에 모든 Cell을 생성하지 않는다.
• 최대 index 31까지의 데이터의 Cell(View)를 생성한다.

// LazyHStack

struct SampleHStack: View {
    
    struct Number: Identifiable {
        let value: Int
        var id: Int { value }
    }
    
    let numbers: [Number] = (0...100).map { Number(value: $0) }
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(numbers) { number in
                    Text("\(number.value)")
                }
            }
        }
    }
}

struct SampleHStack_Preview: PreviewProvider {
    static var previews: some View {
        SampleHStack()
    }
}

LazyHGrid

• GridItem의 개수에 따라 줄도 늘어난다.

struct SampleHStack: View {
    
    struct Number: Identifiable {
        let value: Int
        var id: Int { value }
    }
    
    let numbers: [Number] = (0...100).map { Number(value: $0) }
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHGrid( rows: [
                GridItem(.fixed(20)),
                GridItem(.fixed(20))
            ]) {
                ForEach(numbers) { number in
                    Text("\(number.value)")
                }
            }
        }
    }
}

struct SampleHStack_Preview: PreviewProvider {
    static var previews: some View {
        SampleHStack()
    }
}

List

• 초기화 시점에 모든 Cell을 생성하지 않는다.
• UITableView와 비슷하다. 보여질 필요가 있는 Cell(View)만 생성한다.
• Cell의 삭제/추가 기능이 있다.
• UIScrollView의 기능을 이미 갖고 있기 때문에 List만 구현을 하여도 ScrollView의 기능을 사용할 수 있다.
• ForEach로 굉장히 간단하게 구현이 가능하다.(매우 편함)

struct SampleListView: View {
    
    struct Number: Identifiable {
        let value: Int
        var id: Int { value }
    }
    
    let numbers: [Number] = (0...100).map { Number(value: $0) }
    
    var body: some View {
        List {
            ForEach(numbers) { number in
                Text("\(number.value)")
            }
        }
    }
    
    struct SampleListView_Preview: PreviewProvider {
        static var previews: some View {
            SampleListView()
        }
    }
}

• Section으로 header와 footer도 나눌 수 있다.

struct SampleListView: View {
    
    struct Number: Identifiable {
        let value: Int
        var id: Int { value }
    }
    
    let numbers: [Number] = (0...100).map { Number(value: $0) }
    
    var body: some View {
        List {
            Section(header: Text("첫번째")) {
                ForEach(numbers) { number in
                    Text("\(number.value)")
                }
            }
            
            Section(header: Text("두번째"), footer: Text("Footer")) {
                ForEach(numbers) { number in
                    Text("\(number.value)")
                }
            }
        }
    }
}

struct SampleListView_Preview: PreviewProvider {
    static var previews: some View {
        SampleListView()
    }
}