🔴 Let's Build UBER with SwiftUI | iOS 16 & Xcode 14

UberClone: Location Search Logic

구현 목표

• 쿼리 텍스트를 통해 지역 검색

구현 태스크

• 검색 쿼리 텍스트를 담당하는 뷰 모델
• 텍스트를 통해 실시간으로 검색 기능 구현

핵심 코드

import Foundation
import MapKit
import Combine

class LocationSearchViewModel: NSObject, ObservableObject {
    @Published var results = [MKLocalSearchCompletion]()
    private let searchCompleter = MKLocalSearchCompleter()
    @Published var queryFragment: String = ""
    private var cancellables = Set<AnyCancellable>()
    
    override init() {
        super.init()
        searchCompleter.delegate = self
        bind()
    }
    
    private func bind() {
        $queryFragment
            .debounce(for: .seconds(0.5), scheduler: RunLoop.main)
            .sink { [weak self] query in
                self?.searchCompleter.queryFragment = query
            }
            .store(in: &cancellables)
    }
    
}

extension LocationSearchViewModel: MKLocalSearchCompleterDelegate {
    func completerDidUpdateResults(_ completer: MKLocalSearchCompleter) {
        results = completer.results
    }
}

• ObseravleObject로 선언한 뷰 모델
• 해당 뷰에서 @StateObject로 받을 것이기 때문에 값 변화 포착 가능
• 뷰 텍스트 필드의 현재 실시간 텍스트를 queryFragment에 연동 → 컴바인의 debounce를 통해 0.5 초 동안 인풋이 없을 때 sink 하단으로 데이터가 흘러가도록 구조화
• MKLocalSearchCompleter의 델리게이트 함수 completerDidUpdateResults를 통해 쿼리 검색을 통한 결과를 곧바로 업데이트 가능

    @StateObject private var viewModel = LocationSearchViewModel()
...
TextField("Where to?", text: $viewModel.queryFragment, axis: .vertical)
                        .frame(minHeight: 32)
                        .background(Color(.systemGray4))
                        .padding(.trailing)

• 도착지를 물어보는 검색 결과 뷰의 텍스트 필드의 데이터 소스를 해당 뷰 모델의 쿼리 텍스트와 바인딩

구현 화면