React Native 에서 Firebase Cloud Messaging 이용하기

React Native 에서 Firebase Cloud Messaging 이용하기

개요

저는 현재 Kotlin으로 작성된 안드로이드 네이티브 앱을 React Native로 포팅하고 있습니다. 기존 어플리케이션에서는 점심 시간이 되면 푸시 알림을 통해 당일 급식 식단을 알려주는 기능이 있었는데, 해당 기능을 React Native로 포팅해야 했습니다. 해당 기능을 구현하면서 구현 방법을 블로그에 올려보면 좋을 것 같아, 해당 방법을 자세하게 알려드리려고 합니다.

주의사항

• 저는 이미 구현되어 있는 FCM 서버를 이용하기 때문에, 해당 방법은 게시글에 포함되어 있지 않습니다.
• Firebase 프로젝트 생성 또한 게시글에는 포함되어 있지 않습니다.

개발 환경

• React 버전 16.8.3, React Native 버전 0.59.9 버전입니다.
• 패키지 매니저로 Yarn을 사용하고 있습니다.

React-Native-Firebase 설치

우선 React Native에서 Firebase 관련 기능을 이용하기 위해 React-Native-Firebase를 설치하고, Link 하겠습니다.

yarn add react-native-firebase
react-native link react-native-firebase

그 다음 Android 어플리케이션에 Firebase 관련 코드를 추가해줘야 합니다.
우선 /android/app/src/java/~package_name/MainApplication.java를 열어주신 다음, 위 import가 있는 부분에 아래 코드를 추가해주세요.

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

그리고 패키지 목록을 수정해줘야 합니다.

return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          ...
          new RNFirebasePackage(),
          new RNFirebaseMessagingPackage(),
          new RNFirebaseNotificationsPackage()
      );

return Arrays.asList에 위와 같이 Firebase 관련 패키지를 추가해주세요. 그 다음 프로젝트 수준 build.gradle에 gms 관련 부분을 추가해주세요. 아래와 같이 추가해주시면 됩니다.

buildscript {
  // ...
  dependencies {
    // ...
    // Add the following line:
    classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
  }
}

allprojects {
  // ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

그리고 앱 수준 build.gradle에도 추가해주세요. 아래와 같이 추가해주시면 됩니다.

apply plugin: "com.android.application"

import com.android.build.OutputFile

...

android {
    ...
}

dependencies {
    ...
    implementation "com.google.firebase:firebase-core:16.0.8"
    implementation "com.google.firebase:firebase-messaging:18.0.0"
    implementation 'me.leolin:ShortcutBadger:1.1.21@aar'
}

...

apply plugin: 'com.google.gms.google-services'

그 다음 AndroidManifest.xml의 application 태그 안에 아래와 같이 추가해주세요.

<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>
<service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />

Firebase 설정

이제 Firebase 연동을 위해 Firebase Console에서 설정이 필요한 부분을 설정하겠습니다. 우선 Firebase Console에서 푸시 알림을 추가할 프로젝트에 들어가주세요.

이런식으로 들어오셨다면, 앱을 추가할 플랫폼을 클릭해주세요. 전 안드로이드 앱을 추가하겠습니다.

그 다음 Android 패키지 이름을 입력해주세요. Android 패키지 이름은 /android/build.gradle 파일의 applicationId 항목에 적혀 있습니다. 적어주셨다면 앱 등록 버튼을 눌러주세요.

등록에 성공하셨다면 위 사진과 같은 페이지를 보실 수 있습니다. google-services.json 파일을 다운받아 /android/app 폴더에 넣어주세요.

AndroidX를 사용하시는 경우

이 카테고리는 AndroidX 라이브러리를 따로 사용하시는 분이 아니라면 넘어가셔도 괜찮습니다. 저는 현재 프로젝트에서 AndroidX 라이브러리를 이용하고 있어 오류가 발생했습니다.

error: cannot find symbol
import android.support.v4.app.NotificationManagerCompat;

위와 같은 오류가 발생한다면 AndroidX 라이브러리로 인한 오류입니다. 이미 프로젝트에서 AndroidX를 사용하신 경우 아래 명령어를 실행하시면 오류가 해결됩니다.

yarn add jetifier
npx jetify

테스트

react-native run-android

위 명령어를 통해 어플리케이션을 실행했을때 오류가 없다면 연동 성공입니다!