UIViewRepresentable: UIKit 뷰 래핑하기
SwiftUI에서 makeUIView, updateUIView 및 UIKit 뷰 해제를 구현합니다.
UIViewRepresentable: UIKit 뷰 래핑하기은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
UIViewRepresentable을 사용하는 이유
많은 UIKit 뷰에는 아직 SwiftUI에 대응하는 뷰가 없습니다. UIViewRepresentable은 UIKit 뷰를 SwiftUI로 연결합니다.
import SwiftUI
import UIKit
struct WebView: UIViewRepresentable {
let url: URL
// ...
}필수 메서드
뷰를 만들려면 makeUIView를 구현하고, SwiftUI 상태 변경을 동기화하려면 updateUIView를 구현하세요.
func makeUIView(context: Context) -> WKWebView {
WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}완전한 WebView 예제
SwiftUI에서 웹 콘텐츠를 표시하기 위해 WKWebView를 래핑한 완전한 UIViewRepresentable 예제입니다.
struct WebView: UIViewRepresentable {
let url: URL
func makeUIView(context: Context) -> WKWebView { WKWebView() }
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.load(URLRequest(url: url))
}
}SwiftUI에서 사용하기
래핑된 뷰를 다른 SwiftUI 뷰와 동일하게 사용하고 수정자를 일반적인 방식으로 적용하세요.
WebView(url: URL(string: "https://apple.com")!)
.frame(height: 400)
.cornerRadius(12)데이터 전달하기
래퍼의 저장된 속성을 통해 SwiftUI에서 UIKit으로 데이터를 전달하고, updateUIView에서 이를 업데이트하세요.
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
func makeUIView(context: Context) -> MKMapView { MKMapView() }
func updateUIView(_ uiView: MKMapView, context: Context) {
uiView.setRegion(region, animated: true)
}
}UIKit 뷰 정리하기
뷰가 제거될 때 관찰자 같은 리소스를 정리하려면 선택 사항인 dismantleUIView를 구현하세요.
static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
uiView.stopLoading()
}Context 매개변수
context는 Coordinator, 환경, 애니메이션 트랜잭션에 접근할 수 있도록 합니다.
func updateUIView(_ uiView: MKMapView, context: Context) {
print(context.environment.colorScheme) // .light or .dark
}UIViewRepresentable의 환경 값
context.environment에서 SwiftUI 환경 값을 읽어 UIKit 구성을 조정하세요.
if context.environment.colorScheme == .dark {
uiView.overrideUserInterfaceStyle = .dark
}UIKit 뷰 크기 지정하기
UIViewRepresentable은 고유 콘텐츠 크기나 SwiftUI 프레임 수정자를 사용합니다. 사용자 지정 크기 지정을 위해 sizeThatFits를 구현하세요.
func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
CGSize(width: proposal.width ?? 300, height: 400)
}makeUIView 부작용 피하기
makeUIView는 순수하게 유지하세요. 생성과 구성만 수행하고, 상태에 따른 업데이트는 updateUIView에 넣으세요.
// WRONG:
func makeUIView(context: Context) -> MKMapView {
let v = MKMapView()
v.setRegion(region, animated: false) // belongs in updateUIView
return v
}일반적으로 래핑하는 뷰
UIViewRepresentable로 래핑하는 일반적인 UIKit 뷰는 WKWebView, MKMapView, UITextView, UIImagePickerController, AVPlayerLayer입니다.
// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
@Binding var text: String
// makeUIView, updateUIView, Coordinator...
}빠른 확인
초기 생성이 끝난 후 SwiftUI 상태를 UIKit 뷰에 동기화하기 위해 UIViewRepresentable에서 호출되는 메서드는 무엇인가요?
강의 요약
UIViewRepresentable에는 makeUIView(한 번 생성)와 updateUIView(상태 변경 시 동기화)가 필요합니다. context.environment를 사용하여 외관을 조정하세요. dismantleUIView에서 정리 작업을 수행하세요. 크기 지정을 제어하려면 SwiftUI 프레임 수정자를 적용하세요.
AI 튜터와 함께 Swift을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 122
- 레슨
- 409
자주 묻는 질문
“UIViewRepresentable: UIKit 뷰 래핑하기” 강의는 무료인가요?
네 — “UIViewRepresentable: UIKit 뷰 래핑하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“UIViewRepresentable: UIKit 뷰 래핑하기”에서 뭘 배우나요?
SwiftUI에서 makeUIView, updateUIView 및 UIKit 뷰 해제를 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Swift Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“UIViewRepresentable: UIKit 뷰 래핑하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- UIViewRepresentable: UIKit 뷰 래핑하기
- 델리게이트 통신을 위한 코디네이터 패턴
- UIViewControllerRepresentable
- UIHostingController: UIKit 안의 SwiftUI