[SwiftUI] SwiftUI에서 다른 Apple Framework 사용하기(1)

SwiftUI를 공부해 보면서 굉장히 매력적인 Framwork 라고 생각이 든다.
Apple 강력하게 밀고는 있지만 세상에 나온지 얼마되지 않은 Framework 이다 보니
부족한 점이 많다. 특히 기존에 만들어 놓은 View 들을 SwiftUI에서는 사용하기 힘들 수 있다.

하지만 이런 상황을 대비하여 Apple은 AppKit(Objective - C), UIKit(Swift)의 Framework의
View 들을 SwiftUI로 변환하여 표현 해 줄 수 있다.

Representable Object

Apple 문서에 따르면 Representable Object를 통해서 Wraping 한 다음에 가져올 수 있다고 한다.
영어에 취약하니 Representable 의 사전적 정의를 한번 살펴보고 가도록 하자.

Representable 
1. 나타낼 수 있는 , 묘사 할 수 있는 
2. 대리 할 수 있는
3. 설명 할 수 있는 

한국어로 바꾸어서 생각하니 훨씬 이해하기 쉬운 객체인 것 같다.

AppKit(Objective - C), UIKit(Swift) 모두 2개의 Representable 프로토콜을 가지고 있다.

Representable 프로토콜
기존의 View를 감싸서 표현해 주기 위한 프로토콜이다. 이 프로토콜을 이용하기 위해서는 2개의 함수를 필수적으로 구현해 주어야 한다.

• MakeView
  함수 이름 그대로 View를 만들어 주는 역할을 한다. 이때 사용하고자 하는 View를 반환해 주면 된다.
  기존에 UIKit 또는 AppKit으로 만들어 놓은 View가 있다면 해당 View를 생성하고 반환해 주면 된다.
• UpdateView
  SwiftUI의 View가 Update될 때 호출이 된다.

즉, Representable 프로토콜을 상속받아 View를 만들어 주면 기존에 사용하던 Framwork의 View를
SwiftUI에서 표현해 줄 수 있다.

간단한 예제 코드를 보면서 이해해 보도록 하자!

UIKit -> SwiftUI 에서 사용하기

import SwiftUI
import UIKit

struct RepresentTestView : UIViewRepresentable {
    @Binding var currentCol: UIColor

    func updateUIView(_ uiView: UIView, context: Context) {
        uiView.backgroundColor = currentCol
    }

    func makeUIView(context: Context) -> UIView {
        let control = UIView()
        return control
    }
}

makeUIView 함수를 통해서 UIKit에서 사용되던 UIView 를 만들어 주고 이를 반환해 주었다.
또한 updateUIView 를 통해서 View가 업데이트 될 때 바인딩된 색상을 널어주도록 진행 했다.
이제 위 코드를 SwiftUI의 View에서 사용해 보자

import SwiftUI

struct RepresentableTestSwiftUI: View {
    @State private var currentCol:UIColor = UIColor(.blue)

    var body: some View {
        VStack{
            RepresentTestView(currentCol: $currentCol)
                .padding()
                .frame(width: 200, height: 200, alignment: .center)

            Divider()

            Button {
                currentCol = UIColor(.blue)
            } label: {
                Text("파란색으로 바꾸기")
                    .font(.title)
                    .bold()
                    .foregroundColor(.blue)
            }
            .padding()

            Button {
                currentCol = UIColor(.red)
            } label: {
                Text("빨간색으로 바꾸기")
                    .font(.title)
                    .bold()
                    .foregroundColor(.red)
            }
            .padding()
        }
    }
}



struct epresentableTestSwiftUI_Previews: PreviewProvider {
    static var previews: some View {
        RepresentableTestSwiftUI()
    }
}

기존의 SwiftUI에서 사용하던 View 처럼 가져와서 사용하면 끝이다!!
잘 활용한다면 일일이 SwiftUI에서 구현하지 않아도 기존의 View를 사용 할 수 있을것이라 생각된다.