UIKit에서 SwiftUI Preview 사용하기

UI를 코드로 작성할 때 매번 시뮬레이터를 실행하기 매번 번거롭다.

그럴 경우 Preview를 사용하여 내가 작성한 코드를 쉽게 볼 수 있다.

 

□ 코드 1

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

SwiftUI를 import 한 후 ViewController를 extension 하여 위 코드를 붙어 넣는다.

 

□ 코드 2

struct VCPreView:PreviewProvider {
    static var previews: some View {
        ViewController().toPreview()
    }
}

그리고 위 코드를 붙어 넣으면 미리보기 화면이 생성되어 실행된다.

 

단축키

Cmd + Option + P	Resume
Cmd + Option + Enter	캔버스 그리기

 

꿀팁!

Preview를 사용하여 미리보기를 사용하는 이유는 UI가 잘 들어갔는지 확인하기 위해 사용하는데

AutoLayout이 각 기기마다 잘 적용이 됐는지 확인하기 위해 여러번 실행시켜야하는 번거로움이 있었다.

 

previewDevice("iPad (10th generation)")

위 코드 previewDevice를 이용하여 기기를 변경 시켜서 확인할 수 있다.

 

struct VCPreView:PreviewProvider {
    static var previews: some View {
        ViewController().toPreview().previewDevice("iPhone 14 Pro")
    }
}

struct VCPreView2:PreviewProvider {
    static var previews: some View {
        ViewController().toPreview().previewDevice("iPad (10th generation)")
    }
}

 

진짜 대박.. 개발이 편해지는 기능이다!