SwiftUI 리스트와 데이터 바인딩 간단하게 하기

작성일 : 2024-07-25

SwiftUI 리스트와 데이터 바인딩 간단하게 하기

SwiftUI는 애플이 2019년 WWDC에서 발표한 새로운 UI 프레임워크로, 선언적 문법을 채택하여 코드 가독성과 유지보수성을 크게 향상시켰습니다. 이 글에서는 SwiftUI를 사용해 리스트를 구현하고, 데이터 바인딩을 통해 리스트의 항목을 간단하게 관리하는 방법을 알아보겠습니다.

기본 개념

SwiftUI는 UIKit과 달리 선언적(declarative) 문법을 사용합니다. 선언적 문법이란 화면의 상태를 선언적으로 기술하는 방식을 의미합니다. 예제를 통해 어떻게 SwiftUI에서 리스트와 데이터 바인딩을 사용할 수 있는지 알아보겠습니다.

환경 설정

SwiftUI 프로젝트를 시작하기 위해 먼저 Xcode에서 새로운 프로젝트를 생성합니다. 템플릿으로 App을 선택하고 SwiftUI를 선택합니다. 프로젝트가 생성되면 ContentView.swift 파일을 엽니다.

데이터 모델 만들기

리스트에 표시할 데이터를 정의하기 위해 간단한 데이터 모델을 만듭니다.


swift
struct Item: Identifiable {
    let id = UUID()
    var name: String
}

Identifiable 프로토콜을 채택하여 리스트 아이템이 고유한 ID를 가지도록 합니다. 이렇게 하면 SwiftUI에서 리스트를 효율적으로 업데이트할 수 있습니다.

ViewModel 만들기

SwiftUI의 데이터 바인딩을 위해 ObservableObject 프로토콜을 채택한 ViewModel을 만듭니다.


swift
class ItemListViewModel: ObservableObject {
    @Published var items: [Item]
    
    init() {
        self.items = [Item(name: "Item 1"), Item(name: "Item 2"), Item(name: "Item 3")]
    }
}

@Published 속성 래퍼를 사용하여 items 속성이 업데이트될 때마다 UI가 자동으로 갱신되도록 합니다.

리스트 생성

이제 ContentView에서 리스트를 생성하고, ViewModel을 바인딩해보겠습니다.


swift
struct ContentView: View {
    @ObservedObject var viewModel = ItemListViewModel()
    
    var body: some View {
        NavigationView {
            List(viewModel.items) { item in
                Text(item.name)
            }
            .navigationBarTitle("Items")
        }
    }
}

@ObservedObject 속성 래퍼를 사용하여 ViewModel을 뷰에 바인딩합니다. List 뷰를 사용하여 ViewModel의 items 배열을 표시합니다. NavigationView를 사용하여 내비게이션 제목을 설정합니다.

데이터 바인딩 활용

이제 리스트에 새로운 아이템을 추가하고 삭제하는 기능을 추가해보겠습니다.

아이템 추가

리스트에 새로운 아이템을 추가하기 위해 TextField와 Button을 추가합니다.


swift
struct ContentView: View {
    @ObservedObject var viewModel = ItemListViewModel()
    @State private var newItemName: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    TextField("New Item", text: $newItemName)
                    Button(action: {
                        let newItem = Item(name: newItemName)
                        viewModel.items.append(newItem)
                        newItemName = ""
                    }) {
                        Text("Add")
                    }
                }
                .padding()
                List(viewModel.items) { item in
                    Text(item.name)
                }
            }
            .navigationBarTitle("Items")
        }
    }
}

@State 속성 래퍼를 사용하여 TextField의 입력 값을 관리합니다. Button의 action 클로저에서 새로운 아이템을 생성하고, ViewModel의 items 배열에 추가한 후 TextField를 초기화합니다.

아이템 삭제

리스트에서 아이템을 삭제할 수 있도록 기능을 추가해보겠습니다.


swift
List {
    ForEach(viewModel.items) { item in
        Text(item.name)
    }
    .onDelete { indexSet in
        viewModel.items.remove(atOffsets: indexSet)
    }
}
.navigationBarItems(trailing: EditButton())

ForEach와 onDelete modifier를 사용하여 리스트 항목을 삭제할 수 있습니다. navigationBarItems에서 EditButton을 추가하여 리스트를 편집(삭제)할 수 있도록 합니다.

결론

SwiftUI를 사용하여 리스트와 데이터 바인딩을 간단하게 구현하는 방법을 알아보았습니다. SwiftUI의 선언적 문법은 코드를 더욱 간결하고 이해하기 쉽게 만들며, 데이터 바인딩을 통해 상태 변화를 UI에 자동으로 반영할 수 있습니다. 더 복잡한 애플리케이션을 구현할 때에도 이러한 기본 개념을 잘 활용하면 많은 도움이 될 것입니다.