Native Module 생성

Tags
 

예시 개요

  • Apple의 Calendar apijavascript에서 쓸 수 있도록 하는 CalendarModule 이라는 모듈을 만들어 보자
  • 궁극적으로 javascript에서 아래의 코드를 호출하면, 네이티브 기능이 실행되면서 캘린더 이벤트가 생성되도록 할 거다
    • CalendarModule.createCalendarEvent('Dinner Party', 'My House');
 
💡
native 코드를 작성할 때는 네이티브 언어에 맞는 에디터 사용을 추천한다.
각종 에러 디버깅이나 구문 자동완성, 임포트 자동완성 등 다양한 이점이 있기 때문이다.
  • ios는 네이티브 코드 작성 시 XCocde를 쓰는 것을 추천한다.
  • androidAndroid Studio를 추천한다.
 

RCTBridgeModule?

헤더에 추가하는 내용을 보면 클래스가 RCTBridgeModule 프로토콜을 구현한다.
💡
RN에서 ios 네이티브 모듈이란 RCTBrigdeModule protocol을 구현하는 Objective-C 클래스를 말한다.

Objective-C 네이밍 관례

ObjC에는 Java, C++과 달리 language-level 단에서 네임스페이스를 지원하지 않는다. 따라서 클래스명 앞에 네임스페이스용도의 문자열을 추가하는 것이 관례다. React 관련 모듈은 기본적으로 RCT를 클래스명 앞에 네임스페이스 격으로 추가하는데, React의 약자다.
prefix는 앱 이름, 인프라 이름 등에 대한 축약형이 될 수도 있다.
 

네이티브 모듈 파일 생성

새 파일 단축키 : 커맨드 + N
 

클래스 생성

모듈을 생성할 건데, header fileimplementation file이 필요하다.
공식문서에는 각각을 개별로 생성하도록 안내하고 있지만, 클래스 생성으로 한번에 같이 생성할 수 있다.
 
notion image
notion image
 
notion image
notion image
모듈명은 마음대로 지어도 된다.
이번엔calendar native module을 만드는 거니까 RCTCalendarModule로 짓자.
 

프로토콜 채택 (RCTBridgeModule)

RN용 네이티브 모듈을 만들 때 채택해야 하는 프로토콜이 있다.
RCTBridgeModule을 채택하자.
notion image
 
아래는 자동완성 활용 예시!
Xcode로 작업하는 거니까 이런 장점이 있다.

프로토콜 요구사항 구현

notion image
프로토콜을 채택했으니, 프로토콜 요구사항을 구현해야 한다.
 
notion image
다른 건 없고 모듈 이름을 지정해줘야 하는데, 공식문서에서 사용하는 RCT_EXPORT_MODULE()로 모듈명을 지정하자
모듈 이름과 관련해서는 다음 글을 참조하자