React-Native-Swift — 구글 스트리트 뷰 컴포넌트 만들기 (1)

React Native는 JSCore JavaScript 엔진에서 실행되는 JavaScript 애플리케이션을 iOS 및 Android Native API에 연결하는 Objective-C 애플리케이션 프레임 워크입니다.

React 라이브러리의 구조를 거의 그대로 쓰기 때문에 React 공식 문서와 React Native 공식 문서를 함께 보는 것을 추천합니다.

이 문서는 구글 스트리트뷰를 React Native에서 가져다 쓰기 위한 문서이므로, 구글 지도 사용을 원할 경우 react-native-maps 모듈을 이용하시면 됩니다.

Cocoapods 설치

$ sudo gem install cocoapods

Podfile 생성

현재 React Native 프로젝트의 ios 디렉토리 내에 Podfile을 생성해줍니다.

$ touch Podfile

Podfile을 위와 같이 작성 후 저장하고, ios 디렉토리 내에서 pod install 을 실행하여 설치합니다.

pod 'React', path: '../node_modules/react-native'

(170507 수정) React Native 0.44 버전 업 후 Podfile 9–20번째 줄을 위 한 줄로 바꿔주세요

$ pod install

설치 후 ios 디렉토리 내에서 프로젝트명.xcworkspace 을 열어줍니다. (반드시 !)

그림 1

그러면 Xcode 내에서 프로젝트 구조가 위와 같이 나옵니다.

GoogleMaps 임포트 하기

그림 2

ios/newfuntasy 디렉토리 내의 AppDelegate.m 파일에 2개 문장을 빨간 상자 위치에 삽입해줍니다.

@import GoogleMaps;

여기서 API KEY는 Google Maps SDK for iOS 키를 이용해야 합니다.

[GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];

Google Maps SDK for iOS | Google Developers

AppDelegate.m 예제입니다.

Swift 파일 생성하기

testview 디렉토리에서 마우스 우클릭으로 New File을 선택합니다.

Swift File을 선택하고 Next로 넘어갑니다.

파일 이름을 설정하고 Create을 누릅니다.

이때 아래와 같은 문구가 뜨는데, Create Bridging Header를 클릭합니다.

Objective-C를 Swift로 가져 오기

그럼 디렉토리에 Swift 파일 외에도 testview-Bridging-Header.h 파일이 함께 생성된 것을 확인할 수 있습니다. 이 파일은 Objective-C 파일들을 Swift 에서 사용할 수 있게 import 해주는 역할을 합니다.

다음으로 Swift 에서 사용할 모든 Objective-C 헤더 파일을 import 해줍니다.

다음으로 좀 전에 만든 Swift 파일을 작성해보겠습니다. 구글 스트리트뷰 예제에는 UIViewController를 이용하지만 이 부분을 RCTView로 바꿔서 작성하도록 하겠습니다. Modal 처럼 동작하기를 원하신다면 UIViewController로 작성 후 rootViewController의 present 컨트롤러를 지정해주는 방법이 있지만 저는 기존 UI와 함께 동작하는 스트리트뷰를 원했기에 RCTView를 이용하였습니다.

다음 단계들까지 작성하여 성공한다면 화면에 스트리트뷰가 나올 것입니다.

ViewManager 파일 추가하기

RCTViewManager를 subclassing하며, 이 Swift 클래스를 Objective-C 에서 쓸 수 있도록 @ objc(SwiftStreetViewManager)를 추가해줍니다.

Objective-C Module 추가하기

헤더파일을 만들어서 선언부와 구현부를 나눠주지 않아도 될 정도로 간단하기 때문에 헤더 파일 없이 진행하였습니다. 똑같이 새 파일을 만드는데 Objective-C File을 선택해줍니다.

저는 파일 이름을 SwiftStreetViewModule.m 으로 하였습니다.

그리고 아래 코드를 작성합니다.

전에 SwiftStreetViewManager를 Objective-C 클래스화 시켰으므로 이제는RCT_EXTERN_MODULE을 이용해 React Native 에서 사용할 일만 남았습니다.

StreetView.js 컴포넌트 만들기

네이티브 모듈과 리액트 네이티브끼리 통신할 수 있는 방법은 여러가지가 있습니다. 여기선 SwiftStreetView를 리액트 네이티브 컴포넌트화 시키기 위해 requireNativeComponent를 사용하였습니다.

이제 StreetView를 원하는 곳에 쓰기만 하면 됩니다!

전체 디렉토리 구조입니다.

현재 진행중인 졸업작품에 적용한 예시입니다.

— 마치며

이번 포스팅은 간단히 튜토리얼 식으로 작성하였으며, 좋은 레퍼런스들이 많아서 거의 그대로 따라하였습니다. 다만 Objective-C 와 Swift 를 처음으로 다뤄서 UIViewController로 된 스트리트 뷰 예제를 RCTView로 코드를 변환하는 과정에서 이해에 어려움이 있었는데, 그런 부분들은 다음 포스팅에서 더 자세히 풀어보려 합니다. 2편에선 좀 더 자세한 설명과 리액트 네이티브에서 네이티브로 통신하는 방법에 대해 포스팅 하도록 하겠습니다 :D

감사합니다.

— 참고 사이트

Swift Modules for React Native - Modus Create

Vending pure-Swift views in React Native

Is it possible to push an existing native UIViewController to React-Native's navigator stack …