[SwiftUI] WKWebView 사용 및 Indicator 추가하기

Judy·2023년 7월 21일

swiftui

iOS

목록 보기

28/28

SwiftUI에서 UIKit View 사용하기

WKWebView는 UIKit의 뷰이기 때문에 SwiftUI에서 사용하려면 UIViewRepresentable 채택해야 한다.

UIViewRepresentable

UIKit 뷰를 SwiftUI 뷰 계층에서 사용하기 위한 wrapper

SwiftUI 인터페이스에서 UIView 객체를 만들고 관리
인스턴스에서 이 프로토콜을 채택하고 메서드를 사용하여 뷰를 생성, 업데이트 및 제거하며 관리
시스템이 뷰를 만들고 업데이트하는 적절한 시간에 자동으로 메서드를 호출

required

makeUIView(context:) - 뷰를 생성하고 초기 상태를 구성
updateUIView(_:context:) - SwiftUI의 새로운 정보로 지정된 뷰의 상태를 업데이트

예시

struct WebView: UIViewRepresentable {
    var url: String

    func makeUIView(context: Context) -> some UIView {
        guard let url = URL(string: self.url) else { return WKWebView() }

        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        return webView
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {
		// 업데이트 시 수행할 코드
    }
}

IndicatorView 추가하기

Coordinator

시스템은 뷰 내에서 발생하는 변경사항을 SwiftUI의 다른 뷰로 전달하지 않음
해당 뷰를 다른 SwiftUI 뷰와 조정되도록 하려면 Coordinator 인스턴스를 제공해야 함

method

makeCoordinator() - 뷰에서 SwiftUI 인터페이스로 변경 사항을 전달하는 데 사용하는 사용자 정의 인스턴스를 생성
인터페이스의 다른 부분과 통신할 수 있는 사용자 지정 Swift 인스턴스를 만들어 Coordinator로 전달
UIViewRepresentable의 요구사항이지만 기본 구현이 제공되어 반드시 구현하지 않아도 된다.

WKNavigationDelegate

웹 뷰의 탐색 요청을 수락 또는 거부하고 진행 상황을 추적하는 프로토콜

사용자가 web content 탐색을 시도할 때 대리자(delegate)와 조정하여 모든 전환을 관리
예를 들어 콘텐츠 내의 특정 링크에서 탐색을 제한거나, 요청 진행 상황을 추적하고 오류에 응답하는 데 사용

예시

struct WebView: UIViewRepresentable {
	let url: String
    let activityIndicator = UIActivityIndicatorView(style: .large)
	// 생략

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
}


final class Coordinator: NSObject, WKNavigationDelegate {
    var parent: WebView    

    init(_ parent: WebView) {
        self.parent = parent
    }    

	// 탐색이 시작했음을 대리자에게 알림
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        parent.activityIndicator.startAnimating()
    }

	// 탐색이 완료되었음을 대리자에게 알림
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        parent.activityIndicator.stopAnimating()
    }
}