[swift] Swift UI에서 데이터의 검색과 필터링을 어떻게 구현할 수 있나요?

01 Dec 2023

swift

SwiftUI는 데이터의 검색과 필터링을 구현하는 데 매우 편리한 도구입니다. SwiftUI에서 데이터를 검색하고 필터링하는 방법을 알아보겠습니다.

데이터 검색 기능 구현하기

SwiftUI에서 데이터를 검색하는 가장 간단한 방법은 TextField와 @State 속성을 사용하는 것입니다. 아래는 간단한 예제 코드입니다.

struct ContentView: View {
    @State private var searchText = ""
    
    var body: some View {
        VStack {
            TextField("Search", text: $searchText)
                .padding()
            
            List {
                ForEach(filteredData) { item in
                    Text(item)
                }
            }
        }
    }
    
    var filteredData: [String] {
        if searchText.isEmpty {
            return data
        } else {
            return data.filter { $0.localizedCaseInsensitiveContains(searchText) }
        }
    }
    
    let data = ["Apple", "Banana", "Orange", "Pear"]
}

위의 코드에서 TextField에서 입력한 검색어는 @State 속성인 searchText와 바인딩됩니다. List에서 filteredData 속성을 사용하여 검색어에 해당하는 데이터만 표시됩니다. 필터링된 데이터는 localizedCaseInsensitiveContains 메서드를 사용하여 대소문자를 구분하지 않고 검색됩니다.

데이터 필터링 기능 구현하기

데이터를 필터링하는 방법은 데이터 소스를 변경하여 원하는 조건에 맞는 데이터만 표시하는 것입니다. 아래는 데이터 필터링을 구현하는 예제 코드입니다.

struct ContentView: View {
    @State private var filterByPrice: Bool = false
    
    var body: some View {
        VStack {
            Toggle("Filter By Price", isOn: $filterByPrice)
                .padding()
            
            List {
                ForEach(filteredData) { item in
                    Text(item)
                }
            }
        }
    }
    
    var filteredData: [String] {
        if filterByPrice {
            return data.filter { $0.price > 10 }
        } else {
            return data
        }
    }
    
    let data = [
        Phone(name: "iPhone X", price: 999),
        Phone(name: "Samsung Galaxy S20", price: 1199),
        Phone(name: "Google Pixel 4", price: 799)
    ]
}

struct Phone {
    let name: String
    let price: Int
}

위의 코드에서는 Toggle을 사용하여 가격을 기준으로 데이터를 필터링하는 기능을 추가했습니다. filterByPrice 속성의 값을 변경하면 filteredData가 업데이트되어 필터링된 데이터만 표시됩니다. 필터링된 데이터는 filter 함수를 사용하여 가격이 10보다 큰 데이터만 반환합니다.

위의 예제 코드를 참고하여 SwiftUI에서 데이터의 검색과 필터링을 구현할 수 있습니다.

참고 자료

SwiftUI Apple Developer Documentation