iOS - SwiftUI 튜토리얼 : Handling User Input Part 2

SwiftUI 튜토리얼 번역 + 개인 학습 짬뽕

원문: https://developer.apple.com/tutorials/swiftui/handling-user-input

 

Section 4 - 저장을 위해 'bindable object' 사용하기

  유저가 좋아하는 특정 랜드마크를 컨트롤 할 수 있도록 준비하기 위해서 여러분은 먼저 'bindable object' 에 랜드마크 데이터를 저장할 것입니다. 

 

'bindable object' 란 무엇일까요? 이는 SwiftUI 환경에서 저장소(Storage)로부터 뷰와 경계를 이루는 여러분의 데이터에 대한 사용자 정의 객체(custom object) 를 말합니다. (A bindable object is a custom object for your data that can be bound to a view from storage in SwiftUI’s environment.) SwiftUI 는 뷰에 영향을 끼칠 수 있는 'bindable object' 에 대한 변경 사항을 주시하며, 변경 후에는 올바른 버전(correct version)의 뷰를 표시합니다.

 

뭔 소리야? 음... 애플 문서를 잠깐 봅시다.

위의 설명은 다소 난해했지만 이 한 줄의 설명은 참 잘 다가오네요. '뷰의 모델로 쓰이는 객체' 라고 합니다..

 

 

Step 1

 - 새로운 스위프트 파일 'UserData.swift' 를 생성하고 모델 타입(BindableObject)을 아래와 같이 선언합니다.

 

Step 2

 - 반드시 'didChange' 프로퍼티를 추가합니다. publisher 로서 'PassthroughSubject' 를 사용하세요. (퍼블리셔... 무언가 만들어내는, 그러니까 발신자 같은 느낌으로 일단 볼게요)

  * PassthroughSubject 는 자신의 subscriber 에게 어느 값이든 즉시 전달하는 Combine 프레임워크의 simple publisher(단일 퍼블리셔 정도로 보면 될까요) 입니다. SwiftUI 는 이 publisher(=PassthroughtSubject) 를 통해 여러분의 객체를 구독(subscribe)합니다(구독이라 하니까 좀 이상... 좋은 표현 없을까) 그리고 데이터가 변경될 때 새로고침(refreshing)을 필요로 하는 모든 뷰를 업데이트 합니다.

 - 정리하면 PassthroughSubject 가 Publisher 역할을 하고, SwiftUI가 이 Publisher 를 통해서 객체(object)를 구독하는(subscribe) 거라고 보면 될까요..? 일단 더 보도록 하겠습니다.

 

요 아래 것은 잠시 애플 문서에서 가져온건데... 밑에 보시면 'Required' 보이시죠? 꼭 추가해야 합니다..

위의 장황한 설명보다 이 한 줄이 더 강렬하네요. '객체가 변경될 때마다 이벤트를 내보내는 퍼블리셔'

퍼블리셔를 뭐라 번역해야 좋을까요...

 

 

Step 3

 - 저장 프로퍼티 'showFavoritesOnly' 와 'landmarks' 를 추가하고, 초기값을 다음과 같이 설정합니다.

 

 

 

'bindable object(뷰의 모델로 쓰이는 객체)' 는 'client' 가 모델의 데이터를 업데이트 할 때마다 자신의 'subscriber' 에게 이를 알려야(notify) 합니다. 두 프로퍼티 중 하나가 변경되면, 'UserData' 는 변경 사항을 'didChange' publisher 를 통해 게시해야(should publish) 합니다.  

 

Step 4

 - 'didChange' publisher 를 통해 업데이트를 보내는 양 프로퍼티에 대해 'didSet' 핸들러(handlers)를 생성합니다.

 

 

 

 

Section 5 - 뷰에 모델 객체(Model Object)를 채택하기

 

 

여러분이 'UserData' 객체를 생성했기 때문에, 앱의 데이터 상점? 창고?(data store)로서 이 객체를 채택하기 위해서는 여러분의 뷰를 업데이트 해야 합니다.

 

 

Step 1

 - 'Landmark.swift' 파일에서 'showFavoritesOnly' 선언을(Section 2 에서 추가했었죠?) '@EnvironmentObject' 프로퍼티로 대체합니다. 그리고 두 번째 preview 구조체에 'environmentObject(_:)' 수정자(modifier)를 추가합니다.

  * 이 'userData' 프로퍼티는 'environmentObject(_:) 수정자(modifier)가 부모에 적용되고 있는 한 값을 자동적으로 얻습니다.

 

 

Step 2

 - 'userData' 가 새롭게 추가되었으니 이에 맞게 List 내의 'showFavoritesOnly' 의 사용을 아래와 같이 수정합니다.

  * '@State' 프로퍼티와 같이, 여러분은 '$' 접두어를 사용하여 'userData' 객체의 멤버에 대한 'binding(뷰의 모델)' 에 액세스 할 수 있어요.

 

 

Step 3

 - 'ForEach' 인스턴스를 생성할 때 데이터로 'userData.landmarks' 를 사용합니다. 

 

Step 4

 - 'SceneDelegate.swift' 파일에 'environmentObject(_:) 수정자(modifier)를 LandmarkList 에 추가합니다.

  * 만약 여러분이 preview 를 사용하기보다 시뮬레이터나 실제 디바이스에서 Landmarks 앱을 빌드하여 작동시키면, LandmarkList 의 환경에 UserData 객체가 포함됩니다.

 

Step 5

 - 'LandmarkDetail' 뷰를 업데이트하여 해당 환경에서 'UserData' 객체로 작업하도록 하겠습니다.

  * 'landmarkIndex' 를 랜드마크의 'favorite' 상태를 접근 혹은 업데이트 할 때 사용할 거에요. 그렇기에 여러분은 항상 정확한 데이터 버전에 접근해야 합니다.

 

 

Step 6

 - 'LandmarkList.swift' 로 돌아와, live preview 를 켜서 모든 것이 제대로 작동하는지 확인하세요.

 

 

 

 

 

Section 6 - 각 랜드마크에 대한 'Favorite' 버튼 생성하기 

 

Landmark 앱은 이제 필터링 된 그리고 필터링 되지 않은 랜드마크들의 뷰를 왔다 갔다 스위칭 할 수 있어요, 하지만 좋아하는 랜드마크들의 리스트 부분은 여전히 하드 코딩 되어있죠. 유저에게 자신의 'favorite' 을 추가 및 제거 할 수 있게 하기 위해, 여러분은 'favorite' 버튼을 랜드마크의 세부 내용 에 추가할 필요가 있어요.

 

 

Step 1

 - 'LandmarkDetail.swift' 에서 HStack 내에 랜드마크의 이름(landmark.name) 을 끼워넣습니다.

 

 

Step 2

 - 방금 추가한 landmark.name 다음에 새로운 버튼을 생성합니다. if-else 조건문을 사용해 랜드마크가 'favorite' 상태 인지 아닌지를 나타내는 서로 다른 이미지를 제공합니다.

  * 버튼의 'action' 클로저 부분에서 코드는 'userData' 객체와 함께 'landmarkIndex' 를 사용하여 랜드마크를 제자리에 업데이트 합니다.

 

 

Step 3

 - 'Landmark.swift' 로 돌아와서 live preview 를 켭니다.

 * 여러분이 리스트에서 디테일로 이동하거나 버튼을 탭함으로 다시 리스트로 돌아갈 때 이러한 변경 사항들은 지속됩니다. 왜냐하면 양 뷰는 환경 내에서 같은 모델 객체에 접근하고 있으며 두 뷰는 일관성(consistency)이 유지됩니다.