[SwiftUI] UIKit 사용을 위한 UIViewRepresentable 이해하기

protocol UIViewRepresentable : View where Self.Body == Never

 

• UIView객체를 SwiftUI 인터페이스에서 관리하고 생성할 수 있게 해줌
• SwiftUI에서의 View와 동일하게 생성되고 업데이트 됨
• 시스템은 UIViewRepresentable을 채택하는 객체의 메소드를 적절한 타이밍에 호출함
• 시스템은 해당 객체의 변화에 대해 다른 View와 자동으로 상호작용하지 않기 때문에 이를 원하는 경우 Coordinator을 사용해야 함 (target-action, delegate message 등)

 

makeUIView

@MainActor
func makeUIView(context: Self.Context) -> Self.UIViewType

• View 객체를 생성하고 초기화
• context parameter
  • UIViewRepresentableContext<Self> 타입으로서 만약 WKWebView를 UIViewPresentable을 이용해 CustomWebView를 구현한다면 context의 타입은 UIViewRepresentableContext<CustomWebView>
  • context의 값
    • coordinator
      • UIViewPresentable의 상태 및 이벤트 관리를 위해 사용할 수 있음
      • UIKit의 delegate 와 SwiftUI를 연결하는 역활
    • environment
      • 사용자가 설정한 환경 값을 가지고 와서 적용할 수 있음
      • context.environment.local : 날짜나 숫자 형식 로컬라이징을 위해 사용할 수 있음
      • context.environment.colorScheme : 다크모드인지 라이트모드인지 현재 기기 설정 값을 가지고 올 수 있음
      • context.environment.accessibilityDifferentiateWithoutColor : 대형 텍스트 설정이 되어 있는지 확인하고 view의 값을 조정하는데 사용할 수 있음
    • transaction
      • UIView 애니메이션과 SwiftUI의 애니메이션을 동기화 할 수 있음
      • SwiftUI의 현재 뷰 업데이트 정보 포함
      • 애니메이션과 트랜젝션 사용가능
• 반환값이 UIView 이며 이를 SwiftUI의 View에 표시함. View를 보여주기 위해 필수로 구현되어야 하는 메소드
• 최초로 뷰가 한번 생성될 때 한번 호출되는 함수 (초기 설정). 화면이 나타난 상태에서 업데이트가 필요한 경우 다른 메소드를 사용해서 구현해야 함
• 직접 사용해 보니 updateUIView가 생각보다 자주 호출 되어 업데이트 문제가 발생한다. SwiftUI에서 뷰 계층이 업데이트 되면 updateUIView도 같이 업데이트 되기 때문에 주의 해야 함

    func makeUIView(context: Context) -> WKWebView {
        print("makeUIView")
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        return webView
    }

 

updateUIView

@MainActor
func updateUIView(
    _ uiView: Self.UIViewType,
    context: Self.Context
)

 

• SwiftUI와 View 사이에서 업데이트가 필요할 때 호출. SwiftUI의 state나 binding, 데이터 변경시 UIKit에 반영
• uiView는 UIViewRepresentable을 채택한 Custom View 
• context 바로 위 내용 참고
• 단방향. SwiftUI의 변경사항을 UIKit에 해당 함수로 전달하여 UIKit의 업데이트가 필요한 경우 사용되며 반대로 UIKit의 변화를 SwiftUI의 View로 전달하는 것은 아님

  
    @Binding var url: URL?
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = url {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }

• 바인딩 된 url의 값이 변경되면 WKWebView를 업데이트 함

import SwiftUI

struct ContentView: View {
    @State private var testValue = false
    @State private var currentURLString = "https://tistory.com"
    
    var body: some View {
        VStack {
            CustomWebView(urlString: $currentURLString)
            Button {
                testValue.toggle()
                currentURLString = testValue ? "https://naver.com" : "https://tistory.com"
            } label: {
                Text("토글 버튼")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

(너무나 슬프게도 갑자기 필받아 폰을 베타로 돌린 후 폰이 벽돌이 됬음 현 시점 베타 XCode 15.0을 쓰고 있는데 Preview 코드가 예술입니다. #Preview를 사용하면 PreviewProvider 부분을 간략하게 코딩하고 canvas로 볼수 있습니다)

import SwiftUI
import WebKit

struct CustomWebView: UIViewRepresentable {
    @Binding var urlString: String
    
    func makeUIView(context: Context) -> WKWebView {
        print("makeUIView")
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        print("updateUIView")
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: CustomWebView
        
        init(_ parent: CustomWebView) {
            self.parent = parent
        }
    }
}

• 처음 화면에 로드 되면 mkaeUIView와 updateUIView가 호출됨 -> 버튼을 누르면 SwiftUI View의 State 값(url)이 변경됨 -> 이를 바인딩하고 있는 UIKit의 WKWebView는 updateUIView에서 변경된 State 값을 WKWebView에 반영함

 

Coordinator Class

• Coordinator 클래스는 UIKit의 delegate 를 처리하는데 사용됨

import SwiftUI
import WebKit

struct CustomWebView: UIViewRepresentable {
    @Binding var urlString: String
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: CustomWebView
        
        init(_ parent: CustomWebView) {
            self.parent = parent
        }
        
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            print(parent.urlString)
         }
    }
}

• WKWebView를 구현하기 위해 UIViewRepresentable을 채택하는 CustomView가 있다고 할 때 WKNavigationDelegate를 Coordinator 클래스를 통해 사용할 수 있음
• 이때 parent는 커스텀한 뷰 타입이며 SwiftUI로 부터 전달된 바인딩 값을 parent로 부터 접근하여 사용할 수 있음

 

Pexels에서 Tima Miroshnichenko님의 사진: https://www.pexels.com/ko-kr/photo/6826795/

 

 

참고 사이트

https://developer.apple.com/documentation/swiftui/uiviewrepresentable