🌱 UIHostingController

호스팅 컨트롤러는 UIViewController의 하위 클래스이므로 UIKit과 호환됩니다. UIHostingController는 기존 UIKit 기반 프로젝트에 SwiftUI를 사용할 수있게 해줍니다.

HostingViewController를 사용하여 SwiftUI View는 전체 scen 또는 기존 UIKit 내의 개별 구성 요소로 사용될 수 있습니다.

지금부터 SwiftUI를 HostingViewController를 사용해서 UIkit에 적용하는 법을 알아보겠습니다.

---

Project 생성

먼저 Storyboard를 사용하는 UIKit기반 프로젝트를 하나 만들어주세요. 기본 ViewController에는 간단한 UIImage, UILabel 및 UIButton이 포함되어 있습니다.

UIButton을 탭하면 ViewController에서 SwiftUI로 개발된 View로 이동하도록 하겠습니다.

UIKit에 SwiftUi 연결하기

이동하려는 버튼을 제어하는 ViewController.swift 파일로 이동합니다.

1. 먼저 앱에 스토리보드를 사용하는 경우 UIButton에 대해 @IBAction을 만듭니다.

class ViewController: UIViewController {
    
    // 1. Create the IBAction outlet
    @IBAction func goToSwiftUIView(_ sender: Any) {
        // add action
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

2. SwiftUIView()를 루트 뷰로 사용하여 swiftUIController라는 이름의 UIHostingController를 생성하여 UIKit 기반 프로젝트에 통합할 수 있도록 합니다.

class ViewController: UIViewController {

    // 2. Create a UIHostingController
    let swiftUIController = UIHostingController(rootView: SwiftUIView())
    
    // 1. Create the IBAction outlet
    @IBAction func goToSwiftUIView(_ sender: Any) {
        // add action
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

3. 이제 Hosting controller가 있으므로 다른 View controller와 마찬가지로 사용할 수 있습니다. ViewController를 포함하는 navigationController를 사용하여 swiftUIController를 보낼 수있습니다.

class ViewController: UIViewController {

    // 2. Create a UIHostingController
    let swiftUIController = UIHostingController(rootView: SwiftUIView())
    
    // 1. Create the IBAction outlet
    @IBAction func goToSwiftUIView(_ sender: Any) {
        // 3. Push the UIHostingController
        navigationController?.pushViewController(swiftUIController, animated: true)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Storyboard 와 Segue Outlet을 사용해 연결하기

1. 스토리보드에 UIHostingController 추가

Xcode의 오른쪽 상단 모서리에 있는 + 버튼을 클릭하여 라이브러리를 엽니다. UIHostingController를 검색하여 스토리보드에 끌어다 놓습니다.

2. 스토리보드에서 Segue 만들기

Segue 컨트롤을 만들려면 기본 ViewController의 UIButton에서 방금 추가한 UIHostingController로 드래그(ctrl 키를 누른 상태에서 요소 드래그)합니다.

3. Segue에 Outlet 만들기

Storyboard와 코드를 동시에 볼 수 있는 Assistant 편집기를 사용하여 Storyboard 화살표(두 개의 ViewController 연결)에서 ViewController 클래스로 제어 드래그하여 Segue Outlet을 만듭니다. 방금 @IBSegueAction을 만들고 이름을 segueToSwiftUIView로 지정했습니다.

4. @IBSegueAction 구현

ViewController.swift파일로 이동해서 @IBSegueAction 생성으로 추가된 placeholder를 수정하겠습니다. 우리는 UIKit 기반 프로젝트에 SwiftUI가 연결될 수 있도록 SwiftUIView를 루트 보기로 사용하는 UIHostingController를 return합니다.

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    // 3. Create a Segue Outlet
    @IBSegueAction func segueToSwiftUIView(_ coder: NSCoder) -> UIViewController? {
        // 4. Implement the @IBSegueAction 
        return UIHostingController(coder: coder, rootView: SwiftUIView())
    }
}

Wrapping up

지금까지 SwiftUI View를 UIKit 기반 앱에 연결하는 두 가지 다른 방법을 알아봤습니다.

📚 Reference

createwithswift