[iOS/Swift] UIKit에서 스토리보드 없이 코드로 작성 시 SwiftUI의 캔버스(미리보기, Preview)를 적용하는 방법

사용방법

Preview를 보고 싶은 곳에서 아래 코드를 사용합니다.

 

makeUIViewController(context: Context) 내부에서

이름을 Preview를 보고 싶은 ViewController 이름으로 변경해 주시면 됩니다.

#if DEBUG
import SwiftUI
struct Preview: UIViewControllerRepresentable {
    
    // 여기 ViewController를 변경해주세요 
    func makeUIViewController(context: Context) -> UIViewController {
        ViewController()
    }
    
    func updateUIViewController(_ uiView: UIViewController,context: Context) {
        // leave this empty
    }
}

struct ViewController_PreviewProvider: PreviewProvider {
    static var previews: some View {
        Group {
            Preview()
                .edgesIgnoringSafeArea(.all)
                .previewDisplayName("Preview")
                .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
        }
    }
}
#endif

캔버스 여는 방법은 option + command + Enter입니다.

이러면 PreView를 보실 수 있습니다.

 

또한, 코드 수정 후 PreView를 새로고침하는 방법은

option + commnad + p입니다.

 

 

Extension으로 만들어 사용하기

여러 곳에서 사용할 때 간단하게 사용하기 위해

extension을 이용하여 만들어 봅시다.

import SwiftUI

#if DEBUG
extension UIViewController {
    private struct Preview: UIViewControllerRepresentable {
        let viewController: UIViewController
        
        func makeUIViewController(context: Context) -> UIViewController {
            return viewController
        }
        
        func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        }
    }
    
    func toPreview() -> some View {
        Preview(viewController: self)
    }
}
#endif

 

사용 시

아래 코드를 갖고, Preview를 보고 싶은 곳에서 사용하시면 됩니다.

// MARK: - PreView
import SwiftUI

#if DEBUG
struct PreView: PreviewProvider {
    static var previews: some View {
    // 사용할 뷰 컨트롤러를 넣어주세요
        ViewController()
            .toPreview()
    }
}
#endif