[Swift] SwiftUI에서 Storyboard(UIKit) 화면을 불러오는 방법 : UIViewControllerRepresentable

해당 글에서는 SwiftUI에서 UIKit 화면을 불러오는 방법에 대해서 공유합니다.

1) SwiftUI 화면 : View

---

💡 SwiftUI에서 UIKit으로 구성된 화면을 불러오는 과정을 나열한 페이지입니다. 해당 부분에서는 ScreenShareView() 클래스에 주목해야합니다. 해당 클래스는 UIViewControllerRepresentable 프로토콜을 반환받는 클래스로 구성이 되어있습니다.

import SwiftUI
import Foundation

/**
 * SwiftUI 화면을 로드합니다.
 */
struct TemplateView: View{
    
    var body: some View {
        NavigationView{
            VStack{
                Button(action: {
                    apiSearchRoom()   // 입장 버튼을 눌렀을 경우 수행되는 함수
                }, label: {
                    Text("WHEET Core API 호출 기능")
                })
                .frame(width: 350, height: 20)
                .foregroundColor(Color.white)
                .padding()
                .background(Color("#243062"))
                .cornerRadius(10)
                
                // MARK: 해당 부분에서 UIKit을 불러옵니다.
                NavigationLink(destination: ScreenShareView()) {
                    Text("UIKit 화면 불러오기")
                }
                
            }.padding()
        }
    }
}

/**
 * UIKit으로 구성된 ScreenShareViewController를 호출합니다.
 */
struct ScreenShareView : UIViewControllerRepresentable {
    
    typealias UIViewControllerType = ScreenShareViewController
    
    // MARK: UIViewController를 생성합니다.
    func makeUIViewController(context: Context) -> UIViewControllerType {
        return ScreenShareViewController()      // MARK: ScreenShareViewController의 UIViewController를 호출합니다.
    }
    
    // MARK: UIViewController를 변경하였을때 수행합니다.
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        //
    }
}

 

 

[ 더 알아보기 ]

💡 UIViewControllerRepresentable란?
- SwiftUI와 UIKit 간의 상호 운용성을 제공하는 프로토콜입니다. 이 프로토콜을 사용하면 SwiftUI에서 UIKit의 ViewController를 래핑하여 사용할 수 있습니다.

 

 

2) UIKit 화면 : UIViewController

---

💡 해당 화면은 UIKit으로 구성이 된 페이지입니다.

import UIKit

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // 버튼 생성
        let button = UIButton(type: .system)

        // 버튼 위치 지정 및 크기 설정
        button.frame = CGRect(x: 100, y: 100, width: 100, height: 50)

        // 버튼 타이틀 설정
        button.setTitle("버튼", for: .normal)

        // 버튼 액션 추가
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

        // 뷰에 버튼 추가
        view.addSubview(button)
    }

    @objc func buttonAction(sender: UIButton!) {
        print("버튼이 클릭되었습니다.")
    }
}

 

[ 더 알아보기 ]

💡 UIViewController란?

- UIViewController는 iOS 앱에서 화면 전환과 같은 사용자 인터페이스를 표시하기 위한 기본 클래스입니다. UIViewController는 뷰 계층 구조의 루트 뷰를 관리하며 이벤트 처리와 상태 관리를 담당합니다.
- UIKit에서 제공하는 다양한 컨트롤러들은 UIViewController를 상속받아 구현됩니다.

 

 

3) 결과 확인

---

💡 SwiftUI로 구성된 프로젝트 내에서 UIViewController를 호출하여 화면을 불러오는 부분이 완료되었습니다.

 

 

오늘도 감사합니다. 😀