[Swift] UIKit코드로 SwiftUI Preview 사용해 보기

Storyboard 없으면 세상이 무너지는 줄만 알았던 나...

Snapkit과 code 형식으로 AutoLayout을 짜는 것에 재미를 붙이고 있는 중이다.

 

코드로 작성된 UIKit 기반 레이아웃의 한 가지 불편한 점은

Simulator 혹은 Device에 build하기 전까지는 결과물을 알 수 없다는 것이다.

상상력을 발휘하는 데에도 한계가 있다.

 

UIKit 이후에 나온 SwiftUI는 PreviewProvider를 통해 

코드 변경 시, 실시간으로 변경되는 UI를 확인할 수 있다.

컴파일 과정이 필요 없어 상당히 효율적이며, 편리하다. ( 사소한 변경마다 cmd+R 을 귀찮게 누르지 않아도 된다 ! )

PreviewProvider는 정말 편리하다.

그러던 중 기가막힌 방법을 알게 되었다.

바로 UIKit 환경에서도 PreviewProvider의 사용이 가능 하다는 것.

지금부터 알아보자!

 

 

📂  시작하기에 앞서..

아래 세 가지를 충족하는지 확인해보자.

• Xcode 11.0 +
• iOS 13.0 +
• Mac OS Catalina +

SwiftUI를 import하기 때문이다. 아마 대부분의 개발환경이 이를 충족하고 있을 것이다.

 

 

📂  1. extenstion UIViewController

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 class에 위 Extension을 달아준다.

이렇게 UIViewController에 extension을 추가해주면, 매번 복붙하지 않아도

어느 ViewController에서건 Preview를 사용할 수 있게 된다.

 

 

📂  2. ViewController에서 struct PreviewProvider 선언

struct MyViewController_PreViews: PreviewProvider {
    static var previews: some View {
        MyViewController().toPreview()
    }
}

SwiftUI에도 있는 부분이다.

PreviewProvider를 상속받는 struct를, SwiftUI와 동일하게 선언 해주면 오른쪽에 Preview가 생긴다.

 

 

 

📌  마치며

UIKit 코드로 레이아웃을 만들 때, 거부감이 많이 들었었다.

물론 아직까지 많이 복잡한 레이아웃까지는 구현해보지 못했지만,

거부감 없이 할 수 있게 된 것 같다. Preview까지 가능하니 더 연습하기 쉬워져 좋다 ㅎ

자신에게 맞는 방법이 있겠지만 그렇다고 다른 방법을 배제할 필요는 없는 것 같다.

 

 

 

 

 

오류 및 지적사항은 댓글로 남겨주시면 감사하겠습니다!

참고 :

https://fomaios.tistory.com/entry/iOS-UIKit%EC%97%90%EC%84%9C-SwiftUI-Preview-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0