iOS/WWDC

UIKit과 SwiftUI 사용 (WWDC 2022)

하노 Hano 2023. 3. 20. 17:35

안녕하세요 하노입니다 :)

 

이제 슬슬 SwiftUI을 도입하려는 회사가 많아짐에 따라 더 이상 SwiftUI 공부를 미룰 수 없겠더라구요...ㅎㅎ

그래서 SwiftUI에 대해 알아보던 중 WWDC 자료는 필수로 봐야겠다는 생각이 들어서 정리할 겸 글을 쓰려고 합니다!

 

그럼 시작하겠습니다!


1. UIHostingController

UIHostingController란 UIViewController와 구조적으로 같다고 보시면 됩니다.

다만,

UIViewController는 UIView 객체를 사용하지만, UIHostingController는 SwiftUI View를 사용합니다.

 

 

 

그래서 WWDC에선 건강 관리 앱을 예로 들면서 설명해 주는데요,

HeartRateView가 SwiftUI로 짠 View일 때

이렇게 UIHostingController에 rootView를 넣으면 됩니다.

여기까지는 간단하죠???

 

근데 여기서 아까 UIViewController랑 UIHostingController랑 구조적으로 같다고 했으니 UIViewController에 정의되어 있는 요소들 대부분을 UIHostingViewController에서도 사용 가능합니다.

 

바로 이런식으로요!

 

 

이때 View의 위치와 크기를 어떻게 정해줄꺼냐??? 에 대해서는

iOS 16.0 이상부터 사용 가능한 Size options라는 기능 통해서 Self-Resizing이 가능합니다.

 

Size options

Size options는 아래와 같이 나눠집니다.

여기서 preferredContentSize를 사용할 것인가, intrinsicContentSize를 사용할 것인가에 대해서 차이점이 있다면

preferredContentSize는 Frame이나 Bounds 등 CGSize를 사용한 경우,

intrinsicContentSize는 AutoLayout을 사용한 경우

에 사용하라고 합니다. ( 이 부분에 대해서 만약 틀린 것이 있다면 댓글로 달아주시면 감사드리겠습니다)

 

 

역시나 WWDC 답게 예시를 보여주는데,

이런 식으로 쓰면 됩니다!

 

 

 

 

Bridging data

사실 Bridging data라고 해서 순간 뭘까 생각했는데 내용은 Data Binding에 대한 것이더라구요. 빠르게 확인해 보겠습니다!

 

기존에 Data가 변할 경우 UIKit에선 Data가 변함에 따라 View를 다시 그려줘야 했습니다.

하지만 Combine이 출현하면서 Combine을 사용하면 자동으로 Data가 변함에 따라 View를 자동으로 그려줍니다!

 

이걸 UIHostingViewController에서도 가능한가???

넵! 가능합니다!!!!

 

위 코드를 보면 @ObservedObject를 사용하여 @Published var 로 선언된 beatPerMinute를 자동으로 바인딩시켜서 넣어줍니다.

그리고 UIHostingViewController에 HeartRateView를 넣고 사용해도 자동으로 View를 업데이트시켜준다~~~ 이런 내용입니다.

 

이 부분은 Combine에 대해서 모르시면 어떻게 동작하는지 모르실 수 도 있을 것 같아서 Combine 개념에 대해 조금이라도 이해하고 오시면 쉽게 이해되실 것 같습니다.

 

 

 

3. SwiftUI in Cells

자 그러면 Cell에서는 어떻게 써요?라고 한다면,

기존에는 UIKit의 CollectionView에서 SwiftUI View를 사용하려면 복잡하게 작업할 것 같았습니다.

(UIHostingViewController 쓰고, View 선언하고 rootView에 넣고... 등등)

 

하지만!!! iOS 16부터 새로운 기능을 애플에서 제공합니다.

바로 UIHostingConfiguration 입니다.

 

UIHostingController처럼 UIHostingConfiguration에서 SwiftUI View를 넣으면 쉽게 사용이 가능합니다.

 

 

 

여기서 separator가 마음에 안 들면 alignmentGuide를 통해서 Custom이 가능합니다.

 

 

또한 UIHostingConfiguration에서 swipeActions를 제공하기 때문에 원하는 액션을 이전보다 쉽게 구현할 수 있습니다.

다만 여기서 주의할 점은

index를 사용하면 액션이 동작하는 중에 index가 꼬일 수 있기 때문에 되도록이면 사용하지 않는 것이 좋다고 합니다!

 

 

4. Dataflow for cells

이제 마지막으로 cell의 Dataflow에 대해 알아보겠습니다.

 

 

셀을 삭제하거나, 이동하거나, 등등 데이터 컬렉션 자체에 관해서 변경하는 동작을 할 때

UIKit와 SwiftUI 모두 내부적인 로직이 같다고 합니다.

 

하지만 데이터 컬렉션 내부 값을 변경하는 작업을 하면 보통 Snapshot을 통해서 뷰를 다시 그려줬었습니다.

왜냐면 collectionView에서는 데이터 컬렉션 내부 값이 변경되었는지 알 길이 없기 때문이죠!

 

 

 

 

하지만 여기서도 Combine을 사용하여 바인딩해 준다면 Snapshot을 사용하지 않아도 자동으로 View가 업데이트됩니다!!

그러면 snapshot을 사용할 일이 줄어드니깐 코드도 줄고 효율도 좋아지겠죠?? (왕편함ㅎㅎ)

 

 

 

 

그리고 아래 코드처럼 양방향 바인딩도 가능합니다.

 

 

 


 

오늘은 UIKit과 SwiftUI 사용에 대해 알아보았습니다.

사실 이 WWDC 세션을 처음 보고 와 대박 왕신기!! 라고 생각하면서 코드를 작성해 봤는데 역시나 대박 신기...

 

아직 iOS 16을 도입하기엔 이르지만, 이 기능들을 알고 있으면 언젠가 도움이 될 것 같았습니다!

 

그리고 제가 직접 한글 자막과 영어 자막을 번갈아가면서 확인했으나

혹시 틀린 부분이나 애매한 부분이 있다면 언제든지 댓글로 남겨주시면 감사드리겠습니다!

 

 

 

그럼 오늘 글은 여기서 마치겠습니다. 감사합니다 :D