[SwiftUI] WebView 띄우기

안녕하세요. 해당 게시물은 개발하는 정대리님의 취준생을 위한 스위프트UI 앱만들기 강좌 -fundamental Tutorial(2020) 를 기반으로 했습니다.

 

---

이번에는 WebKit를 사용해서 WebView를 한 번 사용해보고자 합니다.

 

WebView를 사용하기 위해서 WebView를 구현한 .swift 파일을 하나 만들어 봅시다.

저는 MyWebView.swift 파일을 하나 생성했습니다.

 

WebView를 사용하기 위해서는 WebKit를 import 해주어야 하는데

WebKit는 웹 상에 있는 걸 앱 안에다가 넣어주는 프레임워크로 Swift에서도 자주 사용됩니다.

 

WebKit를 사용하기 위해서는 UIKit의 UIView을 사용해야 하는데 우리는 해당 WebView에 UIViewRepresentable를 Delegate해줌으로써 UIView를 사용 가능합니다.

 

struct MyWebView: UIViewRepresentable {

    func makeUIView(context: Context) -> WKWebView {

    }
    
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebView>) {
        
    }
}

UIViewRepresentable은 필수로 makeUIView( )와 updateUIView( )를 사용해야 합니다.

makeUIView는 UIView를 만드는 함수(init 함수)

updateUIView는 SwiftUI가 알아서 뷰를 다시 그릴 때 발동하는 함수

 

 

---

 

이제 안에다가 코드를 한 번 짜보겠습니다.

 

먼저 Web URL를 가져올 매개변수 하나를 선언해두겠습니다.

 

makeUIView에서 해당 변수를 unwrapping하고 해당 url에 해당하는 webView를 생성합니다.

makeUIView에서는 WKWebView를 return하기 때문에 생성한 webview는 return 되어야 합니다.

 

updateUIView에 넣을 기능이 아직 없기 때문에 updateUIView는 비워두도록 하겠습니다.

 

 

import SwiftUI
import WebKit

struct MyWebView: UIViewRepresentable {
    
    var urlToLoad: String
    
    func makeUIView(context: Context) -> WKWebView {
        guard let url = URL(string: self.urlToLoad) else {
            return WKWebView()
        }
        
        let webview = WKWebView()
        webview.load(URLRequest(url: url))
        
        return webview
    }

    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebView>) {
        
    }
}

struct MyWebView_Previews: PreviewProvider {
    static var previews: some View {
        MyWebView(urlToLoad: "https://www.naver.com")
    }
}

MyWebView를 사용하기 위해서는 urlToLoad에 원하는 링크를  String형태로 넣어주어야 합니다.

 

해당 코드를 짜고 나서 preview로 보게 되면 아마 화면이 나오지 않는 걸 확인할 수 있을겁니다.

왜일까요???🤔

 

 

url를 사용할 수 있는 통신 권한을 주지 않았기 때문입니다.

따라서 Info.plist에 통신이 가능하도록 선언을 하도록 하겠습니다.

 

 

두 줄을 선언하고 나서 opt + cmd + p 를 누르면 preview에 네이버 화면이 뜨는 걸 볼 수 있습니다.

혹시나 아무런 화면이 안뜬다면 꼭 위에 Live Preview를 눌렀는지 확인해보세요..!

빨간색으로 표시한 버튼을 누르지 않으면 아마 흰 화면으로 나타날겁니다.

 

---

만들어둔 WebView는 다양한 형태로 응용이 가능하고 많은 뷰에서 사용할 수 있습니다👍