갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편5 – Firebase Cloud Messaging으로 Push 알림 붙이기 (FCM 완전 정복)

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편5 – Firebase Cloud Messaging으로 Push 알림 붙이기 (FCM 완전 정복)

To-Do 앱의 마지막 마무리는?
바로 알림 기능입니다.
할 일을 등록했는데 까먹는다면 의미가 없겠죠?
이제부터는 Firebase Cloud Messaging(FCM)을 이용해
앱 외부에서도 사용자에게 알림을 보내는 기능을 만들어봅시다. 🔔

---

✅ 1. FCM이란?

• Firebase에서 제공하는 푸시 알림 서비스
• iOS/Android 모두 지원
• React Native 앱에 쉽게 연동 가능
• 사용 예:
  • 할 일 리마인더
  • 마케팅 메시지
  • 실시간 알림 등

---

✅ 2. 설치 및 준비

npm install @react-native-firebase/messaging
npx pod-install

---

✅ 3. Android 설정

📄 android/build.gradle

반응형

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

📄 android/app/build.gradle

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

이미 Firebase 연동되어 있다면 생략 가능

---

✅ 4. iOS 설정 (macOS 전용)

1. Xcode 열기
2. Push Notification 권한 활성화
3. Background Modes → Remote notifications 체크
4. Firebase 콘솔에서 APNs 인증 키 등록 (iOS 알림용)

iOS는 Firebase 콘솔 + Apple Developer 설정이 더 복잡하므로, Android 기준 실습을 먼저 추천드립니다.

---

✅ 5. 메시지 수신 구현

📄 NotificationService.js

import messaging from '@react-native-firebase/messaging';
import { Alert, Platform } from 'react-native';

// 알림 권한 요청
export const requestUserPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('푸시 권한 허용:', authStatus);
    getFcmToken();
  }
};

// 디바이스 토큰 얻기
const getFcmToken = async () => {
  const token = await messaging().getToken();
  console.log('FCM 토큰:', token);
};

// 포그라운드 메시지 수신 처리
export const handleForegroundMessage = () => {
  messaging().onMessage(async remoteMessage => {
    Alert.alert(
      remoteMessage.notification.title,
      remoteMessage.notification.body
    );
  });
};

---

📄 App.js에 통합

import React, { useEffect } from 'react';
import { requestUserPermission, handleForegroundMessage } from './services/NotificationService';

export default function App() {
  useEffect(() => {
    requestUserPermission();
    handleForegroundMessage();
  }, []);

  return (
    // 기존 NavigationContainer 등 앱 내용
  );
}

---

✅ 6. Firebase 콘솔에서 푸시 보내기

1. Firebase Console → "Cloud Messaging"
2. "새 알림 보내기" 클릭
3. 제목 / 메시지 입력
4. 앱 설치된 FCM 토큰 붙여넣기
5. 보내기 → 앱에서 알림 수신!

---

✅ 7. 알림 수신 상황별 분류

앱 상태 수신 가능 여부 처리 방식

포그라운드	✅ 가능	onMessage로 직접 Alert
백그라운드	✅ 가능	시스템 Notification 자동
앱 종료	✅ 가능	시스템 Notification 자동 (헤드리스 처리 필요 시 추가 설정)

---

✅ 8. 이 글에서 배운 것

• FCM을 React Native에 연동
• 권한 요청 및 디바이스 토큰 확보
• 실시간 메시지 수신
• Firebase 콘솔로 테스트 알림 발송

---

📘 다음 확장 예고

예약 알림 (정해진 시간에 알림 보내기)
사용자별 맞춤 알림 (Firestore + 토큰 저장)
앱 내부 알림함 구현

---

 

React Native FCM 연동,React Native Firebase Messaging,React Native 푸시 알림 구현,React Native 알림 예제,React Native 메시지 수신 처리,React Native Firebase 알림,React Native 앱 알림 설정,FCM 토큰 얻기,React Native 콘솔 알림 수신,React Native 실시간 알림 기능

---