[SwiftUI] UIViewRepresentable 프로토콜 사용법

 UIKit과 SwiftUI 통합하기 

 

SwiftUI 이전에는 iOS 개발을 위해 UIKit을 사용하였습니다. SwiftUI로 화면을 개발한다고 해도 UIKit을 사용할 수 밖에 없는데요. SwiftUI 화면을 UIKit에서 사용하려면 UIHostingController를 사용해서 쉽게 사용할 수 있는 것처럼 SwiftUI에서는 UIViewRepresentable이라는 프로토콜을 구현함으로써 UIView를 쉽게 SwiftUI에 반영할 수 있습니다.

 

▼ UIViewRepresentable 프로토콜은 UIKit을 SwiftUI에서 사용하기 위해 SwiftUI 형태의 화면으로 만들기 위한 프로토콜입니다. 다음과 같이 일반 UIKit 화면을 UIViewRepresentable를 구현을 통해 SwiftUI 에서 손쉽게 사용할 수 있습니다.

---

 

 

▼ 필수적으로 구현해야 하는 메서드는 다음과 같습니다. makeUIView의 경우 사용할 UIView의 화면을 반환해줍니다. updateUIView는 SwiftUI 화면을 다시 그릴 때 (예: @State 값이 업데이트 됨) 호출되는 메서드입니다.

• makeUIView(context:) -> Self.UIViewType
• updateUIView(Self.UIViewType, context: Self.Context)

 

 

 

▼ 이제 UIViewRepresentable를 실제 화면에 적용해보겠습니다. 단순히 일반 SwiftUI 화면을 붙이듯이 body 영역 안에 추가해주면 됩니다. 예제에서 UIRefreshControl()을 추가해주었습니다.

---

 

 

 델리게이터 연결 

 

▼ 스크롤 뷰의 델리게이터를 구현해주려면 다음 메서드를 구현해주어야 합니다. target으로 self 키워드를 통해 자기 자신을 넘겨줍니다.

• makeCoordinate() -> Coordinator

---

 

 

 

▼ Cooridnator란 델리게이트를 위임해주는 역할을 합니다. 어디에 만들어도 상관 없지만 네이밍을 유지하기 위해서 CustomScrollView 화면에 추가해주겠습니다.

---

 

 

 

▼ 마지막으로 makeUIView에서 context.coordinator를 통해 델리게이터를 알 수 있습니다. scrollView.delegate에 해당 객체를 연결해줍니다.

---

 

간단히 UIKit의 스크롤 뷰를 만들어서 화면에 추가하였습니다. 이처럼 다양한 UIKit화면을 쉽게 만들어서 델리게이터 까지 연결할 수 있습니다. 복잡한 기능을 구현하기 위해서는 다음과 같이 델리게이터 연결을 추가할 수 밖에 없는데요. 지금까지 SwiftUI와 UIKit 화면을 통합해주는 방법을 알아보았습니다.