SwiftUI(iOS) - Web View(웹뷰) 10분컷하기

SwiftUI에서 Web View(웹뷰)를 생성하는 방법에 대해 알아보겠습니다.

 

예전 StoryBoard에서는 Web View를 끌어다놓기만 하면 바로 사용이 가능했지만, SwiftUI에서는 약간의 변경이 있습니다.

 

총 4개의 Step을 통해 빠르게, 정말 10분컷으로(사실 2분이면 끝나는..) 해보겠습니다.

 

Step1)

인터넷 사용을 위해 Info.plist에 들어가서 아래와 같이 설정을 변경해줍니다.

 

목록의 가장 하단 빈 공간을 클릭하고 Enter 키를 눌러 새로운 속성을 넣게 빈 속성을 만듭니다.

 

App Transport Security Settings 라고 입력합니다.

 

Enter 키를 누르고, 해당 속성의 중앙에 있는 + 버튼을 눌러 새로운 속성값을 생성해줍니다.

 

Allow Arbitrary Loads 라고 입력하고, 속성값는 Boolean 으로 설정한 후, 이 속성의 우측 끝에 있는 화살표를 눌러 Yes 로 설정합니다.

 

Step2)

WebKit을 코드 상단 부분에 import 해줍니다.

 

import SwiftUI 밑에 import WebKit 을 넣어주면 됩니다.

 

Step3)

Webview struct를 생성합니다.

 

그냥 아래 코드를 기존 코드의 가장 하단에 넣어줍니다.

struct WebView: UIViewRepresentable {
    let url: URL
    func makeUIView(context: UIViewRepresentableContext<Webview>) -> WKWebView {
        let webview = WKWebView()
        let request = URLRequest(url: self.url, cachePolicy: .returnCacheDataElseLoad)
        webview.load(request)
        return webview
    }
    func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<Webview>) {
        let request = URLRequest(url: self.url, cachePolicy: .returnCacheDataElseLoad)
        webview.load(request)
    }
}

 

Step4)

아래 코드를 메인 ContentView 안에 넣어 웹페이지를 로드합니다.

Webview(url: URL(string: "https://findflag.kr")!)

 

전체 코드)

import SwiftUI
import WebKit

struct ContentView: View {
    var body: some View {
        Webview(url: URL(string: "https://findflag.kr")!)
    }
}

struct Webview: UIViewRepresentable {
    let url: URL
    func makeUIView(context: UIViewRepresentableContext<Webview>) -> WKWebView {
        let webview = WKWebView()
        let request = URLRequest(url: self.url, cachePolicy: .returnCacheDataElseLoad)
        webview.load(request)
        return webview
    }
    func updateUIView(_ webview: WKWebView, context: UIViewRepresentableContext<Webview>) {
        let request = URLRequest(url: self.url, cachePolicy: .returnCacheDataElseLoad)
        webview.load(request)
    }
}

 

끝!