로고

SwiftUI와 UIKit 통합: UITextField와 UITextView의 Binding 사용법

작성일 :

SwiftUI와 UIKit 통합: UITextField와 UITextView의 Binding 사용법

SwiftUI는 애플의 새로운 사용자 인터페이스 프레임워크로, 선언적인 방법으로 UI를 구성할 수 있게 해줍니다. 하지만 아직도 UIKit과의 통합이 필요한 시나리오가 많습니다. 특히 텍스트 입력 컴포넌트인 UITextField와 UITextView에 대해 SwiftUI와 UIKit을 통합하여 사용하는 방법을 이해하는 것이 중요합니다. 이 글에서는 SwiftUI와 UIKit을 통합하여 UITextField와 UITextView에 Binding을 적용하는 방법을 다룹니다.

SwiftUI와 UIKit 통합의 필요성

SwiftUI는 강력한 프레임워크지만, 아직 모든 것을 완벽하게 대체하지는 않습니다. 특히 UITextField와 UITextView와 같은 고급 컴포넌트를 사용하는 경우, UIKit의 기능을 활용해야 할 때가 있습니다. SwiftUI와 UIKit을 통합함으로써, 다음과 같은 장점을 얻을 수 있습니다:

  1. 기존 코드 재사용: 이미 작성된 UIKit 기반의 코드를 그대로 사용할 수 있습니다.
  2. 세부 기능 접근: UIKit이 제공하는 다양한 커스터마이즈 옵션을 사용할 수 있습니다.
  3. 점진적 전환: 애플리케이션의 일부를 SwiftUI로 전환하면서 프로젝트를 점진적으로 업데이트할 수 있습니다.

UITextField와 Binding 적용하기

UITextField를 SwiftUI에서 사용하기 위해서는 UIViewRepresentable 프로토콜을 따르는 커스텀 뷰를 만들어야 합니다. 이는 UIKit 컴포넌트를 SwiftUI에서 사용할 수 있게 해줍니다.

swift
import SwiftUI
import UIKit

struct TextFieldWrapper: UIViewRepresentable {
    @Binding var text: String

    class Coordinator: NSObject, UITextFieldDelegate {
        var parent: TextFieldWrapper

        init(_ parent: TextFieldWrapper) {
            self.parent = parent
        }

        func textFieldDidChangeSelection(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }
    }

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

    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.delegate = context.coordinator
        return textField
    }

    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
    }
}

위 코드에서는 UIViewRepresentable 프로토콜을 구현하여 UITextField와 SwiftUI의 Binding을 연결합니다. makeCoordinator 메소드는 텍스트 필드의 델리게이트 메소드를 처리하는 코디네이터 객체를 생성합니다.

예제: SwiftUI에서 UITextField 사용하기

이제 어떻게 SwiftUI에서 사용되는지 예제를 보도록 하겠습니다.

swift
struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            Text("입력한 텍스트: \(text)")
                .padding()
            TextFieldWrapper(text: $text)
                .padding()
                .border(Color.gray)
        }
        .padding()
    }
}

위 예제에서는 ContentView라는 SwiftUI 뷰에서 TextFieldWrapper를 사용하여 텍스트 필드를 구현하였습니다. @State 프로퍼티를 통해 텍스트 상태를 관리하고, 이를 TextFieldWrapper와 바인딩합니다.

UITextView와 Binding 적용하기

이제 비슷한 방법을 사용하여 UITextView를 SwiftUI에서 사용하는 방법을 살펴보겠습니다. UIViewRepresentable을 사용하여 UITextView를 SwiftUI에서 사용할 수 있도록 래핑합니다.

swift
import SwiftUI
import UIKit

struct TextViewWrapper: UIViewRepresentable {
    @Binding var text: String

    class Coordinator: NSObject, UITextViewDelegate {
        var parent: TextViewWrapper

        init(_ parent: TextViewWrapper) {
            self.parent = parent
        }

        func textViewDidChange(_ textView: UITextView) {
            parent.text = textView.text
        }
    }

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

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.delegate = context.coordinator
        return textView
    }

    func updateUIView(_ uiView: UITextView, context: Context) {
        uiView.text = text
    }
}

위 코드는 UIViewRepresentable 프로토콜을 사용하여 UITextView와 SwiftUI의 Binding을 연결한 예입니다. 마찬가지로 makeCoordinator 메소드를 통해 텍스트 뷰의 델리게이트 메소드를 처리하는 코디네이터 객체를 생성합니다.

예제: SwiftUI에서 UITextView 사용하기

이제 어떻게 SwiftUI에서 사용되는지 예제를 보도록 하겠습니다.

swift
struct ContentView: View {
    @State private var textViewText: String = ""

    var body: some View {
        VStack {
            Text("입력한 텍스트:")
            TextViewWrapper(text: $textViewText)
                .frame(height: 200)
                .border(Color.gray)
                .padding()
            Text("텍스트 내용: \(textViewText)")
        }
        .padding()
    }
}

위 예제에서는 ContentView라는 SwiftUI 뷰에서 TextViewWrapper를 사용하여 텍스트 뷰를 구현하였습니다. @State 프로퍼티를 통해 텍스트 상태를 관리하고, 이를 TextViewWrapper와 바인딩합니다.

결론

SwiftUI와 UIKit을 통합하여 UITextField와 UITextView에 Binding을 적용하는 방법을 알아보았습니다. UIViewRepresentable 프로토콜을 사용하여 SwiftUI와 UIKit 간의 상호 운용성을 제공하며, 이를 통해 개발자는 SwiftUI의 기능을 유지하면서도 UIKit의 강력한 컴포넌트를 활용할 수 있습니다. 이러한 접근 방식은 프로젝트를 점진적으로 SwiftUI로 전환하거나, 기존의 UIKit 코드와 새로운 SwiftUI 코드를 함께 사용할 때 유용합니다.