[Swift] - preview 보는 법

uikit로 개발을 하게되면 단점이 cmd + R키를 눌러야 빌드를 할 수 있다는 거다.

ui를 수정하고 수정된 걸 확인하려면 시뮬레이터를 계속 돌려봐야 한다.

navigation controller로 연결된 마지막 ui를 확인하려하면 계속 넘어가야 한다.

 

SwiftUI는 코드를 만들면서 바로 옆에 preview를 볼 수 있다는 거!!!

uikit에서도 SwiftUI처럼 preview를 사용할 수 있다고 한다.

 

 

uikit에 preview 적용하는 법

 

 

✅ Preview사용 조건

 

• Xcode 11 이상
• iOS 13+

 

 

1️⃣ preview 적용 코드

 

루트 뷰를 설정해준다. 

let rootViewController = "ViewController name" 

 

import SwifiUI

struct MainViewController_Previews: PreviewProvider {
  static var previews: some View {
    Container().edgesIgnoringSafeArea(.all)
  }
  
  struct Container: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
      let rootViewController = ViewController() // ViewController name
      return UINavigationController(rootViewController: rootViewController)
    }
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
    typealias UIViewControllerType = UIViewController
  }
}

 

 

2️⃣ preview 적용 

 

uikit 코드 밑에 다음과 같이 넣어준다. 

그런 다음 preview 실행 단축키인 option + cmd + enter 키를 눌러주면 실행된다.

 

꼭 SwiftUI를 import 해줘야한다~~~!!

 

import SwiftUI
import UIKit

class MainViewController: UIViewController{

    override func viewDidLoad() {
        super.viewDidLoad()
        
        code...
    }
}

// MARK: - Preview

struct MainViewController_Previews: PreviewProvider {
  static var previews: some View {
    Container().edgesIgnoringSafeArea(.all)
  }
  
  struct Container: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
      let rootViewController = MainViewController()
      return UINavigationController(rootViewController: rootViewController)
    }
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
    typealias UIViewControllerType = UIViewController
  }
}

 

 

3️⃣ preview 실행 

 

코드 수정 후 preview 새로고침은 option + cmd + p 키를 눌러준다.

 

 

 

extension으로 preview 사용

 

 

위의 예제는 한 VC에서 preview를 적용하는 경우로 다른 VC에도 계속해서 코드를 작성해야 하는 불편함이 있다.

여러 VC에 preview를 적용하고 싶은 경우 extension으로 간단하게 해결할 수 있다.

 

#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

 

이렇게 확장자를 사용하면 다른 VC에서 preview를 사용해야하는 경우 훨씬 간단하게 코드를 작성할 수 있다.

 

▶️ 사용시

 

아래의 코드에 ViewController()대신 사용하고 싶은 VC를 넣어 사용한다.

 

struct PreView: PreviewProvider {
    static var previews: some View {
        ViewController().toPreview()//사용하고 싶은 VC 넣기
    }
}