[SwiftUI] Mapkit 사용해보기

Creating and Combining Views의 Section5 내용은 Use SwiftUI Views From Other Frameworks 이다.

여기서는 mapkit을 사용하는 것 같으니 순서대로 한 번 따라해본다.

튜토리얼 페이지는 여기 !!

Use SwiftUI Views From Other Frameworks

이번 section에서는 turtlerock의 위치를 표시할 지도 화면을 만든다. Mapkit을 사용한 MapView를 만들어 화면에 띄워보는 작업을 한다.

MapView.swift 파일 생성

새로운 View를 만들기 위해 MapView.swift라는 타이틀로 SwiftUI View 파일 하나를 생성한다.

기존에 만들었던 SwiftUI View 파일들과 동일하게 “Hello, World!”라는 문구가 적힌 코드가 생성된다.

Mapkit import하기

Map을 사용하기 위해 Mapkit 모듈을 import 해준다.

MKCoordinateRegion 프로퍼티 생성

MapView 구조체 내에 private 프로퍼티를 하나 선언한다. 위치를 지정하는 region 프로퍼티.

   @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

@State 라는 모르는 어노테이션이 등장했다..! 이놈은 프로퍼티를 SwiftUI의 View에서 값을 읽고 쓸 수 있도록 해주는데, 다른 뷰에서도 값을 변경할 수 있고 그런 변경값을 자동으로 view에 반영할 수 있도록 해준다고 한다. (아예 State에 대한 글도 하나 써봐야겠다.)

body 내에서 Map 사용하기

MapView의 body 내부에서 Map을 사용한다.

Map(coordinateRegion: $region)

region은 @State로 선언되었기 때문에 코드에서 $region으로 값에 접근한다. (진짜 바인딩하는거구나..) 앱 실행 중 region에 대한 값이 바뀌면 그 값을 바로바로 View에 적용시켜줄 수 있다.

Live Preview 사용해보기

Preview 화면의 시뮬레이터 위를 보면 재생 모양의 버튼이 있다. Live Preview인데, Mapkit이 정상적으로 사용됐는지 렌더링되어 보여진다.

버튼을 눌러보면, 아래와 같이 애플 지도가 나타나는 것을 확인할 수 있다.