[SwiftUI] SwiftUI에서 UIKit 사용하기

SwiftUI만으로 개발을 진행하기에 한계가 있다?

SwiftUI는 비교적 새로운 UI프레임워크이다. UIKit은 오랜 시간 동안 개발되고 개선되어 왔으며, 다양한 UI요소와 상호작용 패턴을 지원한다. 반면 SwiftUI는 아직 발전 중이며, 특히 복잡한 UI패턴이나 특수한 사용자 인터랙션을 구현할 때 제한이 있다. 

 

 API 커버리지 측면에서도 SwiftUI는 아직 UIKit의 모든 기능을 완전히 대체하지는 못한다. 카메라, 복잡한 제스처 처리, 고급 텍스트 편집 기능, 세밀한 애니메이션 제어 등 UIKit이 더 효과적이고 풍부한 API를 제공한다. 따라서 이러한 기능이 필요한 앱에서는 UIKit 컴포넌트를 SwiftUI에 통합해야하는 경우가 많다.

 

 성능 최적화 측면에서도 UIKit이 아직 우위를 점하는 경우가 있다. 특히 복잡한 스크롤 뷰나 대량의 데이터를 표시해야 하는 경우, UIKit의 cell 재사용 메커니즘이 더 효율적인 메모리 사용과 스크롤 성능을 제공할 수 있다. 

 

 또한 iOS 버전 호환성 측면에서도 큰 차이가 있다. SwiftUI는 iOS 13이상부터 지원되므로, 더 오래된 iOS 버전을 지원해야 하는 앱에서는 UIKit을 사용해야 한다. 

 

SwiftUI에서 UIKit을 사용하는 경우

1. SwiftUI에서 아직 지원되지 않는 UIKit 컴포넌트 사용

- UICollectionView의 복잡한 레이아웃을 활용할 때

- UIPageViewController를 활용한 페이징 인터페이스를 구현할 때

 

2. 이미 개발된 UIKit 기반 코드 재사용

- 기존에 개발해둔 UIKit 커스텀 뷰 활용

- 레거시 코드와의 통합

 

3. 특수 입력 처리가 필요한 경우

- 복잡한 제스처 처리

- PencilKit과 같은 드로잉 기술

 

4. 특수 미디어 처리가 필요한 경우

- AVPlayerViewController와 같은 미디어 재생

- PHPickerViewController를 통한 사진 선택

- 카메라 및 마이크 접근을 위한 AVCaputerSession

 

5. 웹 컨텐츠 표시

- WKWebView를 통한 웹 컨텐츠 렌더링

- JS와의 상호작용

 

6. 맵 및 위치 기반 서비스

- MKMapView

- 위치 추적 및 경로 표시 기능

 

7. 차트 및 시각화 도구

- CoreGraphics

- 세밀한 애니메이션 처리

 

UIViewRepresentable

 SwiftUI에서 UIKit 뷰를 사용할 수 있게 해주는 프로토콜이다. 이 프로토콜을 구현하면 UIKit으로 만든 뷰를 SwiftUI 뷰 계층에 통합할 수 있다. 

 

✅ 필수 메서드

1. makeUIView(context:) : UIKit 뷰를 생성하고 초기 설정을 수행한다. 뷰를 생성할 때 이 메소드를 한 번만 호출한다.

func makeUIView(context: Context) -> UIViewType {
    // UIView 생성 및 초기 설정
    let view = UIViewType()
    
    return view
}

 

 

2. updateUIView(_:context:) : SwiftUI 뷰의 상태가 변경될 때 UIKit 뷰를 업데이트하는 메소드. 뷰의 속성이 변경될 때마다 호출된다.

func updateUIView(_ uiView: UIViewType, context: Context) {
    // UIView 업데이트 로직
    // uiView.backgroundColor = backgroundColor
}

 

3. 코디네이터 : UIKit 뷰의 Delegate 역할을 하고 이벤트를 처리한다. (옵셔널)

func makeCoordinator() -> Coordinator {
    Coordinator(self)
}

class Coordinator: NSObject, UITextFieldDelegate { // 예시: UITextField용 delegate
    var parent: MyTextField
    
    init(_ parent: MyTextField) {
        self.parent = parent
    }
    
    // delegate 메소드 구현
    func textFieldDidChangeSelection(_ textField: UITextField) {
        parent.text = textField.text ?? ""
    }
}

 

✅ 옵셔널 메소드

1. dismantleUIView(_:coordinator:) : 뷰가 더 이상 필요하지 않을 때 정리 작업을 수행한다.

func dismantleUIView(_ uiView: UIViewType, coordinator: Coordinator) {
    // 정리 작업 (예: 타이머 중지, 알림 제거 등)
}

 

✅ UITextField를 SwiftUI에서 사용하기

 

struct CustomTextField: UIViewRepresentable {
    @Binding var text: String
    var placeholder: String
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.borderStyle = .roundedRect
        textField.delegate = context.coordinator
        return textField
    }
    
    func updateUIView(_ textField: UITextField, context: Context) {
        textField.text = text
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: CustomTextField
        
        init(_ parent: CustomTextField) {
            self.parent = parent
        }
        
        func textFieldDidChangeSelection(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }
        
        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
            textField.resignFirstResponder()
            return true
        }
    }
}