[iOS 12주차] 아티클: How to Merge SwiftUI and UIKit Navigation

How to Perfectly Merge SwiftUI and UIKit Navigation: A Step-by-Step Guide

SwiftUI와 UIKit의 내비게이션을 통합하는 것은 기존 앱에 새로운 기능을 도입하거나 현대적인 UI를 구현하려는 개발자에게 중요한 과제이다. 이 글에서는 SwiftUI와 UIKit의 내비게이션을 통합하는 방법을 단계별로 안내한다.

1. 프로젝트 설정

• 새 프로젝트 생성: Xcode에서 'App' 템플릿을 선택하고, 'Storyboard'를 사용하여 UIKit 기반 앱을 생성한다.

• SwiftUI 포함: 프로젝트 설정에서 SwiftUI 프레임워크를 추가하고, iOS 13.0 이상을 대상으로 설정한다.

2. SwiftUI 뷰 생성

• 새 SwiftUI 파일 생성: 'ProfileView.swift'라는 이름으로 새로운 SwiftUI 뷰 파일을 만든다.

• SwiftUI 뷰 정의: 'ProfileView' 구조체를 생성하고, 'Welcome to your Profile'이라는 텍스트와 'Go Back' 버튼을 포함한 간단한 UI를 구성한다.

3. SwiftUI를 UIKit에 통합

• UIHostingController 사용: UIKit의 'ViewController'에서 'showProfile' 메서드를 작성하여 'ProfileView'를 'UIHostingController'로 감싸고, 이를 내비게이션 스택에 푸시한다.

4. 통합된 라우터 생성

• Router 클래스 작성: 'Router' 싱글톤 클래스를 만들어 내비게이션 컨트롤러를 약한 참조로 보관하고, 'showProfile' 메서드를 통해 'ProfileView'를 표시하는 기능을 추가한다.

5. ViewController에서 라우터 사용

• 라우터 설정: 'ViewController'의 'viewDidLoad' 메서드에서 'Router.shared.navigationController'에 현재 내비게이션 컨트롤러를 할당하고, 버튼 액션에서 'Router.shared.showProfile()'을 호출하여 프로필 뷰를 표시한다.

6. SwiftUI에서 UIKit으로의 내비게이션 관리

• @Environment 사용: 'ProfileView'에서 '@Environment(.presentationMode)'를 이용하여 'Go Back' 버튼이 탭될 때 이전 UIKit 뷰로 돌아갈 수 있도록 설정한다.

7. 통합 테스트

• 앱 실행 및 테스트: 앱을 실행하여 UIKit 뷰에서 SwiftUI 뷰로의 원활한 전환과 'Go Back' 버튼을 통한 되돌아가기가 제대로 동작하는지 확인한다.

이러한 단계를 따르면, SwiftUI와 UIKit의 내비게이션을 효과적으로 통합하여 일관되고 현대적인 사용자 경험을 제공할 수 있다.