iOS - SwiftUI 튜토리얼 : Building Lists and Navigation Part 4

Apple SwiftUI Tutorial 번역

원문: https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

 

 

Section 7 - 자식 뷰(혹은 하위 뷰)에게 데이터 전달하기

 

 

 

 

 

 

 

 

  LandmarkDetail 뷰는 여전히 자신의 랜드마크를 보여주기 위해 하드 코딩된 디테일한 내용을 사용하고 있어요. LandmarkRow 처럼, LandmarkDetail 타입과 LandmarkDetail 이 포함하는 뷰들은 자신의 데이터를 위한 소스로서 landmark 프로퍼티를 사용할 필요가 있어요. 

 

자식 뷰(child views)부터는 이제, 여러분은 CircleImage, MapView, LandmarkDetail 친구들을 변환하여 각 열을 하드 코딩하는 것이 아니라 전달된 데이터를 나타내도록 할 거에요.

 

 

 

 

 

 

 

 

 

Step 이 이번에는 11까지 있네요.. 달려보도록 하겠습니다!!

 

 

Step 1.

 - CircleImage.swift 에서 'image' 라는 저장 프로퍼티를 CircleImage 에 추가합니다.

  * SwiftUI 를 사용해서 뷰들을 만들려고 할 때 이것은 일반적인 패턴이에요. 여러분의 커스텀 뷰들은 자주 특정 뷰에 대해 일련의 수정자(modifier)들을 감싸고 캡슐화(encapsulate)합니다. (잉? 하시는 분들은 아래 코드를 보면 지금까지 살펴본 코드들과 크게 다르지 않죠? 그것을 이야기하고 있습니다)

 

 

Step 2.

 - preview provider(두번째 구조체) 를 Turtle Rock 의 이미지를 전달하기 위해서 업데이트 합니다.

 

Step 3.

 - MapView.swift 파일에 coordinate(좌표) 프로퍼티를 MapView 에 추가하고 위도(latitude)와 경도(longitude)를 하드코딩 하는 것 대신 해당 프로퍼티를 사용하기 위해 코드를 변환합니다.

2편에서 업데이트된 코드

 

(뭐가 바뀐거지??? Creating and Combining Views 에서 보았던 예전 MapView 코드를 잠시 소환하겠습니다.)

1편에서 작성했던 코드

아하 ! updateUIView(_ : context:) 메서드 내에 있던 coordinate 가 밖으로 나왔군요 ! 1편에서는 위도와 경도가 하드코딩 되어있었습니다. 이제 모든 의문이 풀렸어요.

 

 

Step 4.

 - preview provider 를 data 배열 내 첫 번째 랜드마크(Turtle Rock 이었죠? 여기까지 하니 이제 외워지네요;;) 의 좌표를 전달하기 위해서 업데이트를 해주세요.

 

Step 5.

 - LandmarkDetail.swift 파일에 Landmark 타입을 가지는 프로퍼티를 LandmarkDetail 타입에 추가합니다.

 

Step 6.

 - LandmarkDetail.swift 파일의 아래 preview 를 landmarkData 의 첫번째 랜드마크를 사용하기 위해 다음과 같이업데이트 합니다.

 

Step 7.

 - 사용자 지정 형식에 맞춰 필요한 데이터를 전달하세요.

 

Step 8.

 - 마지막으로, 'navigationBarTitle(_: displayMode:)' 수정자(modifier)를 호출하여, 디테일 뷰를 보여줄 때 네비게이션 바에 타이틀을 주겠습니다.

 

Step 9.

 - SceneDelegate.swift 파일에서(새로운 파일이네요!), 앱의 루트 뷰를 LandmarkList 가 되도록 바꿔줍니다.

  * 미리보기(preview) 대신 시뮬레이터 내에서 독자적으로 작동할 때에는 SceneDelegate 내 정의된 root view 를 기반으로 앱이 시작합니다.

요렇게 되면 잘 하신거에요!!!!!!!!!

 

 

Step 10.

 - Landmark.swift 파일에서 현재의 랜드마크를 목적지(destination) LandmarkDetail 로 전달합니다.

 

Step 11.

 - live preview 로 전환합니다. 리스트로부터 탐색할 때, 디테일 뷰가 올바른 랜드마크를 보여줍니다.

 

 

 

Section 8 - 동적으로 미리보기를 만들어 보기

 

 

  다음으로 여러분은 LandmarkList_Previews 의 미리보기 프로바이더(preview provider) 에 코드를 추가하여 서로 다른 디바이스 사이즈에 리스트 뷰 미리보기를 렌더링 해볼 것입니다. (오...) 기본적으로 미리보기는 활성화된 스키마 내의 디바이스의 사이즈로 렌더링 됩니다. (이 말이 무슨 말인지 한번 이번 섹션을 통해 알아봅시다...!) 여러분은 'previewDevice(_:)' 라는 수정자 메서드(modifier method) 를 호출하여 프리뷰 디바이스를 변경할 수도 있어요.

 

* Scheme : 데이터의 요소와 속성을 정의하는 정보 모델을 나타내는 시스템

 

 

 

Step 1.

 - iPhone SE 사이즈에 맞게 렌더링을 하도록 되어 있는 현재 리스트 미리보기(List preview)를 변경하면서 시작하겠습니다.

  * Xcode 의 메뉴 scheme 에 나타나는대로 장치의 이름을 제공할 수 있어요. 

이상한게... 저 iPhone XS 가 아니고 iPhone SE 가 맞는게 아닌가? 애플의 실수인가?

프리뷰에 iPhone SE.

 

음.. 좀 이상하네요. iPhone XS 라고 프리뷰 디바이스에 적혀있는데 정작 프리뷰에는 iPhone SE 시리즈가 출력되고 있어요.

iPhoneXS 라고 바꿨다고 생각하면 프리뷰에도 XS 가 있어야 하는데 말이죠...(왜냐하면 Step 2 에서는 이런 식으로 나오거든요) 아니면 XS 가 맞다고 치면, 프리뷰에는 XS 가 나와야 하는데... 이거 모르겠네요.

 

 

Step 2.

 - list preview 내부의 ForEach 인스턴스 안으로 LandmarkList 를 넣어주세요.

 - data 로는 디바이스 명을 배열형식으로 사용해 주시면 되겠습니다.

  * ForEach 는 리스트와 같은 방식으로 컬렉션 타입에서 작동합니다. 즉, 자식 뷰를 사용할 수 있는 어느 곳에서든 사용할 수 있다는 의미이죠. 예를 들면 스택(stacks), 리스트(lists), 그룹(groups)등 에서요. 여러분이 사용하는 데이터의 요소들이 단순한 값 타입일 때(여러분이 지금 여기서 사용하고 있는 string 과 같은), 식별자(identifier)에 대한 키 경로(key path)로서 ' \.self ' 를 사용할 수 있어요.  

 

위는 iPhone SE, 아래는 iPhone XS Max

 

Step 3.

 - 'previewDisplayName(_:)' 수정자(modifier)를 사용하여 각각의 미리보기에 대해 레이블로 디바이스의 이름을 추가해주세요.

 - 바로 위 사진을 보시면 Preview 라고 되어있죠? 이것이 어떻게 되는지 잘 보세요.

previewDisplayName(_:) 수정자(modifier)

디바이스 명이 추가되었어요

 

Step 4.

 - 여러분의 뷰의 렌더링을 비교하기 위해 다른 디바이스들도 경험해 보는 것도 물론 가능해요. 

 

 

 

 

원문에 접속해서 질문을 해결해보세요.

다음번에는 Handling User Input 에 대해 알아보겠습니다 :)