SwiftUI 복잡한 리스트와 컬렉션 뷰 구성

작성일 : 2024-07-12

SwiftUI 복잡한 리스트와 컬렉션 뷰 구성

SwiftUI는 애플의 최신 UI 프레임워크로서, 매우 선언적인 방식으로 사용자 인터페이스를 만들 수 있게 해줍니다. 특히, 리스트와 컬렉션 뷰와 같은 복잡한 데이터 중심의 뷰도 간단하게 구성할 수 있는 도구를 제공합니다. 이 글에서는 복잡한 리스트와 컬렉션 뷰를 이용해 강력하고 확장 가능한 UI를 구축하는 방법에 대해 다룹니다.

리스트(List)의 기본 구성

SwiftUI에서 리스트는 매우 간단하게 구성할 수 있습니다. List 컴포넌트를 사용하면 데이터 항목들을 시각적으로 나열할 수 있습니다. 예를 들어, 기본적인 리스트는 다음과 같이 작성할 수 있습니다.


swift
import SwiftUI

struct SimpleListView: View {
    let items = ["One", "Two", "Three"]

    var body: some View {
        List(items, id: \ .self) { item in
            Text(item)
        }
    }
}

위 코드에서는 items 배열의 문자열을 리스트로 나열합니다. List 뷰는 각 항목을 식별하기 위해 'id' 속성을 사용하여 고유한 값으로 처리합니다.

커스텀 셀(Custom Cell) 만들기

기본적인 리스트는 간단하지만, 현실적인 애플리케이션에서는 더 복잡한 셀이 필요합니다. 이를 위해 커스텀 뷰를 리스트의 셀로 사용할 수 있습니다.


swift
struct CustomCell: View {
    let title: String
    let subtitle: String

    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .font(.headline)
            Text(subtitle)
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }
}

struct CustomListView: View {
    let items = ["First Item", "Second Item", "Third Item"]

    var body: some View {
        List(items, id: \ .self) { item in
            CustomCell(title: item, subtitle: "Subtitle for \(item)")
        }
    }
}

이 예제에서는 CustomCell 뷰를 만들어 각 리스트 항목에 제목과 부제목을 표시합니다. 이제 더 복잡한 UI를 리스트 셀로 쉽게 사용 가능합니다.

섹션(Section)으로 리스트 구분하기

리스트를 섹션으로 구분하면 사용자가 데이터 구조를 더 쉽게 이해할 수 있습니다. SwiftUI의 Section 컴포넌트를 사용하면 간단하게 섹션을 추가할 수 있습니다.


swift
struct SectionedListView: View {
    let sections = ["Fruits", "Vegetables", "Dairy"]
    let items = [
        ["Apple", "Orange", "Banana"],
        ["Carrot", "Cucumber", "Tomato"],
        ["Milk", "Cheese", "Butter"]
    ]

    var body: some View {
        List {
            ForEach(0..<sections.count, id: \ .self) { index in
                Section(header: Text(self.sections[index])) {
                    ForEach(self.items[index], id: \ .self) { item in
                        Text(item)
                    }
                }
            }
        }
    }
}

이 코드는 Section을 이용하여 데이터 항목을 'Fruits', 'Vegetables', 'Dairy'와 같은 섹션으로 구분하여 리스트를 구성합니다. 각 섹션에는 해당 항목들이 나열되어 있습니다.

컬렉션 뷰(Collection View) 구성

컬렉션 뷰는 그리드 형식으로 데이터를 표시할 때 유용합니다. SwiftUI에서 그리드 레이아웃은 LazyVGrid와 LazyHGrid를 사용하여 구현할 수 있습니다. 예를 들어 세로형 그리드를 구성하는 코드는 다음과 같습니다.


swift
struct GridItem: Identifiable {
    var id = UUID()
    var value: String
}

struct GridView: View {
    let items = [
        GridItem(value: "One"),
        GridItem(value: "Two"),
        GridItem(value: "Three"),
        GridItem(value: "Four"),
        GridItem(value: "Five"),
        GridItem(value: "Six")
    ]

    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(items) { item in
                    Text(item.value)
                        .frame(width: 100, height: 100)
                        .background(Color.blue)
                        .cornerRadius(10)
                        .foregroundColor(.white)
                }
            }
            .padding()
        }
    }
}

위 코드는 LazyVGrid를 사용하여 두 개의 열로 구성된 그리드를 만들며, 각 셀에는 'One'부터 'Six'까지의 텍스트 값이 표시됩니다. 셀의 크기와 모서리 반경도 설정하여 그리드를 좀 더 보기 좋게 만들 수 있습니다.

동적 데이터와 데이터 바인딩

실제 앱에서는 리스트와 컬렉션 뷰에 표시되는 데이터는 종종 실시간으로 변경됩니다. 이를 위해 SwiftUI는 @State, @Binding, @ObservedObject, @EnvironmentObject 등의 속성을 통해 데이터 바인딩을 지원합니다.


swift
class DataModel: ObservableObject {
    @Published var items = ["Item 1", "Item 2", "Item 3"]

    func addItem() {
        items.append("Item \(items.count + 1)")
    }
}

struct DynamicListView: View {
    @ObservedObject var model = DataModel()

    var body: some View {
        VStack {
            List(model.items, id: \ .self) { item in
                Text(item)
            }
            Button(action: model.addItem) {
                Text("Add Item")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(5)
            }
        }
    }
}

이 예제에서는 ObservableObject 프로토콜을 준수하는 DataModel 클래스를 만들어, @Published 속성을 통해 데이터를 자동으로 업데이트합니다. DynamicListView 뷰는 이 데이터를 @ObservedObject 속성을 사용하여 구독합니다. 버튼을 사용하여 리스트에 항목을 추가할 때마다 자동으로 UI가 업데이트됩니다.

결론

SwiftUI를 사용하면 복잡한 리스트와 컬렉션 뷰를 쉽게 구성할 수 있습니다. 다양한 데이터 유형과 구성을 지원하며, 데이터 바인딩을 통해 실시간 데이터 업데이트도 원활하게 처리할 수 있습니다. 이 글에서 소개한 예제들을 기반으로, 더 복잡하고 강력한 사용자 인터페이스를 개발할 수 있을 것입니다.