SwiftUI 동적 리스트 구현하기: 실시간 데이터 처리

SwiftUI는 iOS, macOS, watchOS 및 tvOS에서 사용자 인터페이스를 구축하기 위한 프레임워크로, 선언형 문법을 사용하여 코드를 간결하고 직관적으로 작성할 수 있습니다. 이 글에서는 실시간 데이터를 처리하고, 이를 동적으로 업데이트되는 리스트 형태로 표시하는 방법에 대해 알아보겠습니다.

프로젝트 설정

먼저 Xcode에서 새 프로젝트를 생성한 후, SwiftUI를 사용하도록 설정합니다. 프로젝트가 준비되면, ContentView.swift 파일을 열어 초기 설정을 진행합니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

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

여기서는 단순히 텍스트를 출력하는 기본 코드를 볼 수 있습니다. 이제 이 코드를 수정하여 동적 리스트를 표시해 보겠습니다.

데이터 모델 작성

실시간 데이터 처리를 위해서는 데이터를 저장하고 업데이트할 수 있는 데이터 모델이 필요합니다. 아래는 예시로 사용할 Item 모델입니다.

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

이 모델은 Identifiable 프로토콜을 채택하여 리스트에서 각 항목이 고유의 ID를 가질 수 있도록 합니다.

ViewModel 작성

다음으로는 실제 데이터 소스를 업데이트하는 역할을 할 ViewModel을 작성합니다. 실시간 데이터를 처리하기 위해서는 ObservableObject를 사용합니다.

swift
class ItemViewModel: ObservableObject {
    @Published var items: [Item] = []

    func addItem(_ name: String) {
        let newItem = Item(name: name)
        items.append(newItem)
    }
}

@Published 속성 래퍼는 items 배열이 업데이트될 때마다 해당 변화를 모든 구독자에게 자동으로 알립니다. addItem 메서드는 새 항목을 추가하는 예제입니다.

동적 리스트 구현

이제 ContentView에서 위에서 만든 ViewModel을 사용해 동적 리스트를 구현해 보겠습니다.

swift
struct ContentView: View {
    @StateObject private var viewModel = ItemViewModel()
    @State private var newItemName: String = ""

    var body: some View {
        VStack {
            TextField("Enter new item", text: $newItemName, onCommit: addItem)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            List(viewModel.items) { item in
                Text(item.name)
            }
        }
        .navigationTitle("Dynamic List")
    }

    private func addItem() {
        guard !newItemName.isEmpty else { return }
        viewModel.addItem(newItemName)
        newItemName = ""
    }
}

이 코드는 텍스트 필드와 리스트로 구성된 간단한 User Interface를 생성합니다. 사용자가 텍스트 필드에 항목을 입력하고 Enter 키를 누르면 addItem 메서드가 호출되어 리스트에 새 항목이 추가됩니다.

실시간 데이터 업데이트

실제 프로젝트에서는 웹소켓(WebSocket)이나 푸시 알림(Push Notification) 등을 통해 실시간 데이터를 받는 상황이 있을 수 있습니다. 본 예제에서는 타이머를 사용해 데이터가 실시간으로 업데이트되는 상황을 시뮬레이션해 보겠습니다.

swift
class ItemViewModel: ObservableObject {
    @Published var items: [Item] = []

    init() {
        Timer.scheduledTimer(withTimeInterval: 5.0, repeats: true) { _ in
            self.addItem("Item at \(Date())")
        }
    }

    func addItem(_ name: String) {
        let newItem = Item(name: name)
        items.append(newItem)
    }
}

이 코드에서는 Timer를 사용해 5초마다 새로운 항목이 자동으로 리스트에 추가되도록 설정했습니다. 실제로는 이 부분을 웹소켓 수신 처리 등의 실시간 데이터 수신 코드로 대체하면 됩니다.

결론

SwiftUI를 사용해 동적 리스트를 구현하고 실시간 데이터를 처리하는 방법에 대해 알아보았습니다. 본 예제에서는 간단한 UI와 타이머 기반의 실시간 데이터 업데이트를 구현하였지만, 실제 애플리케이션에서는 다양한 데이터 소스와 상호작용할 수 있습니다. SwiftUI의 강력한 데이터 바인딩 기능을 활용하면 복잡한 데이터 처리도 쉽게 관리할 수 있습니다.