[WWDC21] Discover concurrency in SwiftUI

목차

• Concurrent data models
• SwiftUI and the main actor
• New concurrency tools

해당 영상을 보기전에 참고하면 좋을 WWDC 영상

• Meet async/await in Swift
• Explore structured concurrency in Swift

예시 앱 ) 우주 이미지 목록들 보여주고 저장하는 앱

(우주 이미지를 받아오려면 오래걸린다는 큰그림이 예상됩니다  🧐)

Concurrent data models

• 이미지에 대한 정보를 가지고 있는 모델 SpacePhoto

  • 

• 이미지 배열을 가지고 있는 모델 Photos
  • ObservableObject 로 되어있어 @published 어노테이션이 붙은 items 값이 변경시 데이터 변경시 SwiftUI View 업데이트될 것으로 기대!

  • 

• SwiftUI 코드 : 우선 타이틀을 리스트 형태로 보여주고 있는 상태

  • 

  • 

how SwiftUI interacts with observable object

• SwiftUI 뷰가 업데이트되는 생명 주기인 "run loop" 에 대해 우선 살펴보자!
  • Swift 5.5 에서는 run loop 는 Main actor 에서 실행된다.
  • 런 루프는 "사용자로부터 이벤트 수신 -> 모델 업데이트 -> SwiftUI 뷰를 화면에 렌더링" 를 반복하고, 이를 "ticks of the run loop" 라고 표현한다.
    

    

    
    

    

• Run loop 를 길게 펴보면 다음과 같다.
  • items 는 Published 속성인점에 주목 🧐
  • objectWillChange 이벤트를 트리거하고, 서버로부터 가져온 사진을 items 용 스토리지에 기록한다.
  • SwiftUI 는 objevtWillChange 이벤트를 보고 items 에 스냅샷을 찍는다.
  • 스냅샷 이후의 다음 run loop tick 에서 SwiftUI 는 스냅샷과 현재 값을 비교한다.
  • 스냅샷과 현재 items 값이 다르기 때문에 View 를 업데이트한다.

• 이 모든 과정은 Main actor 에서 발생하므로 순서대로 발생한다.
  • 메인에서 작업하니 느려질거라는 큰그림! 🧐
  • 지난번에 본 Data Essentials 영상에서 main actor 에서 많은 작업을 수행하면 느려진다는 것을 이야기 했었다.
  • fetchPhotos() 메소드가 오래걸릴 경우 유저에게 hitch 현상이 나타날 수 있다.
    

    

• DispatchQueue.global().async 코드로 비동기 처리를 할 수 있겠지만, 아래 코드대로면 순서가 보장되지 않아 SwiftUI view 가 업데이트 되지 않을 수 있다.
  

  

• await 을 이용해서 이미지를 fetch 하는 동안에는 main 에서는 다른 작업들이 동작할 수 있게 하고, fetch 가 끝난 후에 SwiftUI View 를 업데이트 하는 순서를 보장할 수 있다.
  

  

• objevtWillChange 이벤트 트리거가 정상적으로 되기 위해 Photos 클래스에 @MainActor 어노테이션을 추가해서 Main actor 에서만 액세스할 수 있도록 보장해주자.
  

  

Task 

https://developer.apple.com/documentation/swiftui/view/task(priority:_:)

 

• Catalog 뷰가 표시될 때마다 비동기 작업인 updateItems 를 호출하도록 해보자.
  • 이전에는 appear 를 이용했지만, task 를 통해 비동기 작업을 뷰와 연결할 수 있다.
  • task 는 view 의 생명 주기가 시작될 때 시작되고, view 의 생명주기가 끝나면 task 는 자동으로 취소된다.
  • 뷰의 생명 주기에 대해서는 Demystify SwiftUI 영상 참고!
    

    

 

AsyncImage API

https://developer.apple.com/documentation/SwiftUI/AsyncImage

• AsyncImage 를 통해 이미지를 받아오는 처리를 진행할 수 있다.
  • 이미지를 로딩하다가 에러가 났을 때에도 placeholder 를 보여주도록 되어있다.

SwiftUI View + async await

• Button 에 대한 액션 내부에 async - await 을 이용해서 비동기 동작을 수행하도록 할 수 있다.
• @State 변수를 만들어 로딩 중을 처리할 수 있다.
  

  

List - refreshable

func refreshable(action: @escaping () async -> Void) -> some View
https://developer.apple.com/documentation/swiftui/view/refreshable(action:)

• 새로고침을 위한 refreshable modifier 가 제공된다.
• List 에 refreshable 을 추가해서 해당 콘텐츠에 pull to refresh 기능을 넣을 수 있다.
• closure 내부에 비동기로 동작할 메소드를 작성해주면 된다.

Wrap up

• SwiftUI 에서도 async 기반으로 동작을 수행할 수 있도록 메소드들이 제공되니, await 을 사용하자 !