[React Native] Firebase Cloud Messaging(FCM) 연동

react-native-firebase를 사용하면 Firebase Cloud Messaging(FCM)을 통해 푸시 알림을 구현할 수 있습니다.
FCM은 기기 간 메시지 전송 및 푸시 알림을 제공하는 Google의 클라우드 메시징 서비스로, React Native 애플리케이션에서도 쉽게 통합할 수 있습니다.
이번 포스팅에서는 react-native-firebase를 사용하여 FCM을 설정하고 메시지를 처리하는 방법을 단계별로 살펴보겠습니다.

출처: Firebase

---

1. 준비 작업

1.1 Firebase 프로젝트 생성

1. Firebase 콘솔(Firebase Console)에서 새 프로젝트를 생성합니다.
2. 프로젝트 설정에서 Android/iOS 앱을 등록하고, google-services.json (Android) 또는 GoogleService-Info.plist (iOS)을 다운로드합니다.

1.2 React Native 프로젝트에 Firebase 설정

• React Native 프로젝트를 생성합니다.

npx react-native init MyFirebaseApp

• react-native-firebase 설치

npm install @react-native-firebase/app @react-native-firebase/messaging

• Android의 경우, android/app 디렉토리에 google-services.json을 복사하고, android/build.gradle과 android/app/build.gradle을 수정해 Firebase 설정을 추가합니다.
• iOS의 경우, ios 디렉토리에 GoogleService-Info.plist를 복사하고, CocoaPods을 업데이트 합니다.

cd ios
pod install

2. Friebase Cloud Messaging(FCM) 설정

2.1 Android FCM 설정

• AndroidManifest.xml에 권한 추가

<uses-permission android:name="android.permission.INTERNET"/>

• android/build.gradle에 Google 서비스 플러그인 적용

dependencies {
  classpath 'com.google.gms:google-services:4.3.14' // 최신 버전
}

• android/app/build.gradle 수정

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

2.2 iOS FCM 설정

• 푸시 알림 기능 활성화
  • Xcode에서 프로젝트를 열고 "Signing & Capabilities" 탭에서 "Push Notifications"와 "Background Modes"를 활성화합니다.
  • Background Modes에서 "Remote nitifications"를 체크합니다.
• AppDelegate 파일 수정
• didRegisterForRemoteNotificationsWithDeviceToken 메서드를 추가해 APNs 인증서를 설정합니다.

3. React Native 코드 작성

3.1 FCM 초기화

FCM 서비스는 앱이 시작될 때 초기화해야 합니다.

import messaging from '@react-native-firebase/messaging';

// FCM 권한 요청
async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    
  if (enabled) {
    console.log('FCM 권한 승인:', authStatus);
  }
}

requestUserPermission();

3.2 토큰 관리

기기별 FCM 토큰을 가져오고 저장합니다.

useEffect(() => {
  const getToken = async () => {
    const token = await messaging().getToken();
    console.log('FCM Token:', token);
    // 서버로 토큰 전송
  };
  
  getToken();
  
  return messaging().onTokenRefresh((token) => {
    console.log('토큰 갱신:', token);
    // 서버로 갱신된 토큰 전송
  });
}, []);

3.3 메시지 수신 및 처리

백그라운드 및 포그라운드 상태에서 메시지를 처리합니다.

import { Alert } from 'react-native';

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    Alert.alert('새 메시지', JSON.stringify(remoteMessage.notification));
  });
  
  return unsubscribe;
}, []);

3.4 백그라운드 메시지 처리

백그라운드 메시지를 처리하려면 index.js에 백그라운드 핸들러를 등록해야 합니다.

import messaging from '@react-native-firebase/messaging';

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('백그라운드 메시지 수신:', remoteMessage);
});

4. Firebase에서 푸시 알림 테스트

1. Firebase 콘솔에서 "Cloud Messaging"을 선택합니다.
2. 새 메시지를 작성하고, 등록한 기기로 전송합니다.
3. 메시지가 기기에 도달하면 알림이나 로그로 확인할 수 있습니다.

---

React Native에서 react-native-firebase를 사용하면 Firebase Cloud Messaging(FCM)을 쉽게 통합하여 강력한 푸시 알림 기능을 구현할 수 있습니다.
초기 설정과 FCM 토큰 관리, 메시지 수신을 통해 앱과 사용자의 연결성을 강화할 수 있으며, Firebase 콘솔을 활용하면 알림을 손쉽게 테스트하고 전송할 수 있습니다.