[SwiftUI] SwiftUI와 UIKit 통합하기 (1/2)

안녕하세요! 피피아노입니다 🎵

 

이번 포스팅에서는 SwiftUI와 UIKit을 통합하는 방법에 대해서 한번 알아보려고 합니다. 

(이번 포스팅에서는 간단하게 개념만 짚고 다음 포스팅에서 프로젝트를 만들어서 설명해드리겠습니다!)

서론

iOS 개발 생태계는 끊임없이 진화하고 있습니다. SwiftUI가 도입되기 전에 개발된 앱들은 iOS SDK에 포함된 UIKit과 UIKit 기반의 프레임워크를 사용해서 개발이 되었습니다.

 

2019년 Apple이 SwiftUI를 도입한 이후, 많은 개발자들이 이 새로운 선언적 UI 프레임워크의 장점을 누리고 있습니다. 하지만 동시에 수년간 축적된 UIKit의 강력한 기능과 광범위한 라이브러리를 완전히 배제하기는 어려운 것이 현실입니다.

 

그렇기 때문에 SwiftUI와 UIKit을 통합하는 방법에 대해서 알아보려고 합니다. 

 

그럼 바로 시작하겠습니다.

 

UIHostingController

SwiftUI와 UIKit을 통합하려면 UIHostingController를 사용하면 통합할 수 있습니다.

 

UIHostingController 클래스의 형태인 호스팅 컨트롤러는 UIViewController의 하위 클래스이며, 이 클래스의 목적은 UIKit 기반의 프로젝트에 통합될 수 있도록 SwiftUI 뷰를 감싸는 것입니다.

 

UIHostingController 공식 문서

애플 공식 문서를 확인해보면 아래와 같이 나와 있는 걸 확인할 수 있습니다.

https://developer.apple.com/documentation/swiftui/uihostingcontroller/

UIHostingController | Apple Developer Documentation

 

 

호스팅 뷰 컨트롤러를 사용하면 SwiftUI 뷰를 전체 화면으로 처리하거나 컨테이너 뷰에 호스팅 컨트롤러를 내장하여 기존 UIKit 화면 레이아웃 내에 개별 컴포넌트로 취급할 수 있게 됩니다.

(기본적으로 컨테이너 뷰는 뷰 컨트롤러가 다른 뷰 컨트롤러의 자식으로 구성되게 함!)

 

SwiftUI와 UIKit 통합 방법

SwiftUI 뷰는 코드나 인터페이스 빌더 스토리보드를 사용하여 UIKit 프로젝트에 통합될 수 있는데 

아래와 같이 코드를 작성하면 호스팅 뷰 컨트롤러에 SwiftUI 콘텐트 뷰를 포함하게 됩니다.

let SwiftUIcontroller = UIHostingController(rootView: SwiftUIView())
present(SwiftUIController, animated: true, completion: nil)

 

만약 호스팅된 SwiftUI 뷰를 기존 UIViewController의 레이아웃에 직접 포함시키려면 아래처럼 작성해주면 됩니다.

 override func viewDidLoad() {
        super.viewDidLoad()
        
        // SwiftUI 뷰 생성
        let swiftUIView = ContentView()
        
        // UIHostingController를 사용하여 SwiftUI 뷰를 호스팅
        let hostingController = UIHostingController(rootView: swiftUIView)
        
        // 호스팅된 뷰 컨트롤러를 자식으로 추가
        addChild(hostingController)
        
        // 호스팅된 뷰를 현재 뷰 계층에 추가
        view.addSubview(hostingController.view)
        
        // 호스팅된 뷰의 제약 조건 설정
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        // 자식 뷰 컨트롤러 추가 완료
        hostingController.didMove(toParent: self)
    }

 

성능 주의사항

• 과도한 중첩 사용 피하기
• 큰 뷰 계층을 한 번에 호스팅 X
• 필요한 경우에만 업데이트 하도록 최적화 하기

---

감사합니다.

 

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!