NPM을 이용한 React Native 네이티브 모듈 작성과 배포

6 min readMar 16, 2017

React Native(이하 RN)로 개발을 하다보면 개발 생산성을 이유로 직접 개발하는 것보다 이미 많은 오픈 소스 커뮤니티에 배포되어 있는 검증된 패키지들을 사용하는 경우가 많습니다. 그 중에는 RN에서 지원하지 않는 Platform API를 네이티브 모듈로 만들어서 배포하는 패키지들도 있습니다(react-native-maps, react-native-device-info 등등).

사실 지원하지 않는 Platform API에 대해서 어떻게 네이티브 모듈을 만들어서 앱에서 접근할 수 있는지에 대한 방법이 RN 온라인 문서에 플랫폼 별로(iOS, Android) 기술되어 있습니다. 하지만 이는 앱 내에서 플랫폼 별로 네이티브 모듈을 만들어서 앱에서 접근하는 방법이고, 패키지로 관리하기 위해서 네이티브 모듈을 어떻게 작성하고 배포하는지에 대한 정확한 가이드는 없습니다.

지금부터 기술하는 내용은 네이티브 모듈을 NPM 패키지로 만들고 배포한 후에 앱과 통합을 어떻게 하는지에 내용으로 아래의 순서로 진행합니다.

NPM으로 패키지 배포를 위한 설정
Android 를 위한 네이티브 모듈 작성
iOS 를 위한 네이티브 모듈 작성
배포 및 앱에 패키지 설치

NPM으로 패키지 배포를 위한 설정

Github에 새로운 repo 생성

가장 먼저 할 일은 배포할 모듈에 대해서 repo를 생성하는 일입니다. 그리고 만든 repository를 로컬에 clone 합니다.

git clone git@github.com:kyo504/react-native-sample-module.git

배포자 정보 설정 및 계정 추가

npm set init.author.name “Hunkyo Jung”npm set init.author.email “hunkyo.jung@gmail.com”

위와 같이 입력하면 ~/.npmrc 파일에 정보가 저장되고 npm init을 할 때마다 기본 정보로 사용되기 때문에 매번 입력해야 하는 번거러움을 줄일 수 있습니다. 입력 후에는 npm login 을 통해 사용자 계정을 추가합니다.

npm 패키지 초기화

이제 배포할 패키지 대한 정보를 담고 있을 package.json 을 만들기 위해 clone한 repository의 root에서 npm init 명령을 수행합니다. 요청하는 정보를 기술하고 나면 package.json 파일이 생성된 것을 확인할 수 있습니다.

index.js 파일 작성

이제 배포할 모듈의 시작점이 될 index.js 파일을 작성해야 합니다. 우리는 iOS, Android의 미디어 플레이어의 일부 기능을 가지는 모듈을 만들 것이기 때문에 아래와 같이 작성하도록 하겠습니다.

var { NativeModules } = require('react-native');module.exports = NativeModules.RNAudioPlayer;

위의 코드는 RNAudioPlayer라는 이름으로 네이티브 모듈을 만들어서 RN의 패키지 리스트에 등록할 것이고 이를 JS쪽에 export한다는 의미입니다.

안드로이드를 위한 네이티브 모듈 작성

안드로이드에서 네이티브 모듈을 만들려면 안드로이드 라이브러리를 생성해야 합니다. 그런데 Android Studio의 시작 화면에서 바로 만들 수는 없고 프로젝트를 생성해서 라이브러리로 변환하는 과정을 거쳐야 합니다. 이게 생각보다 귀찮은 과정이기도 하고 불필요한 파일들도 많이 생성되기 때문에 여기에서는 필요한 몇 개의 템플릿 파일에 필요한 코드만 추가해서 라이브러리를 만들어 보도록 하겠습니다.

최종으로 만들어질 라이브러리의 트리 구조는 아래와 같이 되어 있으며 우리가 작성해야 할 파일은 4개입니다.

├── build.gradle
└── src
    └── main
        ├── AndroidManifest.xml
        └── java
            └── com
                └── eegoma
                    └── RNAudioPlayer
                        ├── RNAudioPlayerModule.java
                        └── RNAudioPlayerPackage.java

각 파일의 역할은 다음과 같습니다.

build.gradle : 라이브러리 빌드와 관련된 내용(SDK 버전 등)
AndroidManifest.xml : 앱에 대한 필수 정보를 시스템에 제공(권한 등)
RNAudioPlayerModule.java : 네이티브 동작 및 JS로 노출 시킬 함수 포함
RNAudioPlayerPackage.java : 모듈을 앱의 패키지에 포함시키기 위한 용도

파일 내부의 실제 코드는 아래 링크의 여기 를 참고해서 작성하시면 됩니다.

iOS를 위한 네이티브 모듈 작성

iOS의 경우에는 조금 더 간단하게 진행할 수 있습니다.

먼저, xcode에서 새로운 프로젝트를 하나 만드는데 앱이 아닌 Cocoa Touch Static Library를 선택합니다. 위치는 repository의 root로 선택하고, Android에서와 동일한 이름으로 설정한 후 완료하면 간단히 프로젝트가 만들어집니다. 이때 폴더가 RNAudioPlayer로 되어 있을 텐데 이를 ios로만 변경합니다.

이제 xcode 프로젝트에 존재하는 두 개의 파일을 수정하면 되는데 여기 를 참고하시어 작성하시면 됩니다.

npm 을 통한 배포와 모듈 설치 및 링킹

여기까지 오셨다면 이제 모듈은 완성되었습니다. 이제 만든 모듈을 npm publish 를 통해서 배포합니다. 그리고 React Naitve 앱과 통합하는 작업을 해야 합니다.

react-native init AwesomeProject

이렇게해서 프로젝트를 하나 만들고 앱의 root에서 배포한 모듈을 설치합니다.

npm install --save react-native-sample-module

마지막으로 모듈을 앱에 링크 걸어주기 위해서 아래의 명령어를 수행합니다.

react-native link

이렇게 함으로 인해 네이티브 의존성을 가진 모듈들이 앱과 링크가 걸리게 됩니다.

마치며…

RN 의 기본 컴포넌트들도 훌륭하지만 RN의 진짜 힘은 점점 커지고 있는 오픈 소스 커뮤니티에서 배포되고 있는 많은 모듈들에 있지 않나 싶습니다. 때로는 필요한 기능이 있다면 직접 만들어보고 이를 배포해 보는 것은 어떨까요? 😀

이곳에서 작성한 모듈에 대한 코드 및 샘플 앱은 Github에서 확인하실 수 있습니다.