Add Map to SwiftUI project with MapKit | SwiftUI Map App #3

MapClone: MapKit

구현 목표

• 맵킷 구현

구현 태스크

• 지역 데이터를 가진 퍼블리셔
• LocationModel 변경 시 자동으로 지역 데이터 변경
• 뷰 모델 바인딩

핵심 코드

import SwiftUI
import MapKit

@MainActor
final class LocationsViewModel: ObservableObject {
    @Published var locations: [LocationModel]
    @Published var mapLocation: LocationModel {
        didSet {
            updateMapRegion(location: mapLocation)
        }
    }
    @Published var mapRegion: MKCoordinateRegion = .init()
    
    init(locations: [LocationModel] = LocationModel.stubs) {
        self.locations = locations
        guard let mapLocation = locations.first else {
            self.mapLocation = LocationModel.stubs[0]
            return
        }
        self.mapLocation = mapLocation
        updateMapRegion(location: mapLocation)
    }
    
    private func updateMapRegion(location: LocationModel) {
        withAnimation(.easeInOut) {
            mapRegion = MKCoordinateRegion(center: mapLocation.coordinates,
                                            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1))
        }
    }
}

• @Published로 선언된 로케이션 데이터가 업데이트될 때 didSet을 통해 최신 값으로 updateMapRegion 함수가 실행
• 해당 함수를 통해 mapRegion 값을 업데이트
• mapRegion 또한 @Published, 즉 퍼블리셔이므로 해당 값을 통해 UI를 그리는 뷰에서 자동으로 UI 갱신 가능

구현 화면