[iOS] UIKit에서 Preview 보기

WWDC 2023에서 UIKit에 새롭게 추가된 내용으로,
이제 UIKit에서 Preview 매크로를 사용하여 기존보다 더 간단하게 볼 수 있는 방법이 추가됐습니다.

기존에도 UIKit에서 Preview를 볼 수 있었지만 매크로를 사용해서 더 간결한 코드로 볼 수 있게 새롭게 추가되었기 때문에 아쉽지만 오늘 소개해 드릴 방법은 iOS 17.0 이상의 버전에서만 사용할 수 있습니다.

그렇다면 기존의 코드와 비교해서 새롭게 추가된 Preview 매크로를 어떻게 사용하는지 빠르게 살펴보겠습니다.

---

iOS 17.0 이전 버전에서 Preview 보는 방법

preview를 여러 곳에서 사용할 수 있게 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를 보고싶은 곳에서 아래의 코드를 사용하면 됩니다.

import SwiftUI

struct PreView: PreviewProvider {
    static var previews: some View {
        // Preview를 보고자 하는 ViewController를 넣으면 됩니다.
        HomeViewController().toPreview()
    }
}

---

iOS 17.0 이후 버전에서 Preview 사용 방법 (New)

기존의 방법에서 extension으로 따로 만들 필요도 없고, import SwiftUI를 할 필요도 없이 아주 간단하게 매크로를 사용하여 Preview를 볼 수 있습니다.

여러 가지 방법이 있지만 아래의 3가지 방법 모두 비슷해서 필요에 따라 골라서 사용하면 되겠습니다.

// MARK: - Preview
#Preview("HomeVC", traits: .defaultLayout, body: {
    HomeViewController()
})

#Preview(traits: .defaultLayout, body: {
    HomeViewController()
})

#Preview {
    HomeViewController()
}