Swift Academy · 강의

UIViewRepresentable: UIKit 뷰 래핑하기

SwiftUI에서 makeUIView, updateUIView 및 UIKit 뷰 해제를 구현합니다.

레슨 1/413개 단계

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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. UIViewRepresentable: UIKit 뷰 래핑하기
  2. 델리게이트 통신을 위한 코디네이터 패턴
  3. UIViewControllerRepresentable
  4. UIHostingController: UIKit 안의 SwiftUI
← Swift Academy(으)로 돌아가기