[SwiftUI] UIViewRepresentable 사용하기

UIViewRepresentable 을 사용하는 이유

SwiftUI는 최신 iOS 앱을 쉽게 만들 수 있는 강력한 도구입니다. 

그러나 SwiftUI로 모든 것을 할 수는 없습니다. 

예를 들어, 맵, 비디오 플레이어, 웹 뷰, 캘린더 등의 UIKit 클래스를 SwiftUI에서 직접 사용할 수 없습니다. 이러한 경우에는 UIViewRepresentable을 사용하여 UIKit 클래스를 SwiftUI에서 사용할 수 있습니다.

 

UIViewRepresentable 이란

UIViewRepresentable은 UIView를 SwiftUI View로 래핑하기 위한 프로토콜입니다. 

UIViewRepresentable을 준수하는 구조체를 만들면, UIKit에서 사용할 수 있는 모든 UIView 클래스를 SwiftUI에서 사용할 수 있게 됩니다.

 

 

UIViewRepresentable 주 사용처

UIViewRepresentable을 사용하면, UIKit에서 제공하는 강력한 기능들을 SwiftUI에서 사용할 수 있습니다. 예를 들어, 맵, 비디오 플레이어, 웹 뷰, 캘린더 등의 UIKit 클래스를 SwiftUI에서 간단히 사용할 수 있습니다. 또한 UIViewRepresentable을 사용하여 SwiftUI에서 미리 정의된 View의 한계를 극복하거나, 복잡한 레이아웃을 만드는 데도 사용될 수 있습니다.

 

 

UIViewRepresentable 사용 방법

UIViewRepresentable은 두 개의 필수 메서드를 정의해야 합니다.

첫 번째 메서드는 makeUIView(context:)입니다. 이 메서드는 SwiftUI View가 생성될 때 호출되며, UIView 인스턴스를 만들어 반환합니다.

두 번째 메서드는 updateUIView(_:context:)입니다. 이 메서드는 SwiftUI View가 업데이트 될 때 호출되며, UIView 인스턴스를 업데이트하는 데 사용됩니다.

 

 

UIViewRepresentable 를 사용하여 작성한 코드

아래는 SwiftUI에서 UIViewRepresentable을 사용하여 WKWebView를 표시하는 간단한 예시 코드입니다.

 

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://www.google.com")!)
    }
}

위 코드에서 WebView는 UIViewRepresentable을 준수하는 구조체입니다.

makeUIView(context:) 메서드에서는 WKWebView 인스턴스를 만들어 반환합니다. updateUIView(_:context:) 메서드에서는 WKWebView 인스턴스를 업데이트하고, 해당 웹 사이트의 URL을 로드합니다.

 

SwiftUI View인 ContentView에서는 WebView를 사용하여 구글 홈페이지를 로드하도록 지정했습니다.