[Tip] 코드로 화면 짤 때 조금 더 편하게 짜는 법

안녕하세요. 밀쿄입니다.

오늘은 코드로 화면 짤 때 조금 더 편하게 짜는 방법에 대해 알아보겠습니다.

코드르 화면 짤 때 화면을 미리 볼 수 없어서 많이 불편했습니다.

실제로 화면 하나를 수정하기 위해서 수정 -> 빌드를 몇 번이나 반복한 적도 있습니다..( 이건 제가 실력이 없어서 그럴지..)

그치만 XCode 11이 나오고 SwiftUI에서 사용할 수 있는 XCode의 Canvas뷰? Canvas모드?를 활용하면 조금 더 편하게 코드를 짤 수 있습니다.

이 팁을 처음본건 작년 Let's Swift였는데 그 때만 해도 캔버브뷰만 틀면 제 엑스코드가 자주 먹통이 되어버려서..

포스팅을 안하고 있었는데요..11.4부턴 조금 덜 먹통이 되길로 남겨봅니다..

 

위에서 말했듯이 SwiftUI에서 사용할 수 있는 방법이기 때문에 기존에 화면 SwiftUI에서 사용할 수 있는 Object로 만들어줘야합니다.

https://developer.apple.com/documentation/swiftui/uiviewcontrollerrepresentable

UIViewControllerRepresentable - SwiftUI | Apple Developer Documentation

이 프로토콜을 채택해서 만들면 됩니다.

이제 같이 만들어봅시다.

UIKit으로 만들어진 클래스 밑에

다음과 같이 선언해줍시다.

#if canImport(SwiftUI) && DEBUG
import SwiftUI
#endif

이제 이러고 나서 UIViewControllerRepresentable을 채택하는 구조체를 만들어줍시다.

그러면 XCode에서 두 감지 함수를 생성하라고 할 것인데.

func makeUIViewController(context: Context) -> ViewController { }
func updateUIViewController(_ uiViewController: ViewController, context: Context) { }

이 두 가지 함수를 구현해줘야합니다.

쉽게 생각하면 make로 시작하는 함수는 UIViewController를 초기화하고 생성하는 함수 입니다.

update로 시작하는 함수는 UIViewController가 업데이트가 필요하면 호출되는 함수 입니다.

 

이제 이렇게 SwiftUI에서 사용할 수 있는 Object를 만들고나면

PreviewProvider라는 프로토콜을 채택해서 다음과같이 만들어주시면 됩니다.

struct MainViewControllerPreview: PreviewProvider {
    static var previews: some View {
        //위에서 만들어준 구조체를 여기서 생성
    }
}

이제 준비는 다 끝났습니다.

이제 Xcode에서 캔버스 뷰를 켜봅시다.

이렇게 사용하시면 됩니다.

 

이제 왼쪽에 코드를 바꿀 때마다 자동으로 오른쪽에 업데이트가 됩니다.