🔔 41. React Native 알림 기능 정리 — 로컬 vs 푸시 알림, 구현 전략까지

---

모바일 앱에서 알림(Notification)은 필수 기능이다.
유저의 이탈을 줄이고, 앱으로 다시 돌아오게 만드는 핵심 UX 요소이기도 하다.

React Native에서 알림은 크게 두 가지로 나뉜다:

1. 로컬 알림(Local Notification) — 기기 내부에서 스케줄된 알림
2. 푸시 알림(Push Notification) — 서버에서 전달되어 앱 외부에 표시되는 알림

---

✅ 1. 로컬 알림 (Local Notification)

특정 시간에 기기 내에서 자동으로 알림을 발생시킴

대표 라이브러리: react-native-push-notification

npm install react-native-push-notification

import PushNotification from 'react-native-push-notification';

PushNotification.localNotification({
  title: "알림 제목",
  message: "이건 로컬 알림입니다!",
});

• 앱이 꺼져 있지 않은 상태에서 즉시 알림
• 타이머 알림, 반복 알림 등 설정 가능
• iOS, Android 모두 지원하지만 설정이 다름

✅ 간단한 기능에는 적합
❌ 앱이 완전히 종료되면 제한적

---

✅ 2. 푸시 알림 (Push Notification)

서버에서 FCM, APNs를 통해 메시지를 보내고, 기기에서 수신

가장 많이 쓰는 방식: Firebase Cloud Messaging (FCM)

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

기본 흐름

1. 앱에서 토큰 발급 받기
2. 서버에 토큰 등록
3. 서버 → FCM 서버로 메시지 전송
4. FCM → 유저 디바이스로 알림 표시

예시 코드

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

useEffect(() => {
  messaging().onMessage(async remoteMessage => {
    Alert.alert('푸시 알림', remoteMessage.notification?.title);
  });
}, []);

✅ 앱 꺼진 상태에서도 수신 가능
✅ 백엔드 연동 가능
❌ 서버 설정, 인증, 플랫폼별 대응 필요

---

🔁 로컬 vs 푸시 알림 비교

항목	로컬 알림	푸시 알림
발생 주체	앱 내부 (클라이언트)	서버
앱 상태 필요	앱 실행 중 필요	앱 종료 상태도 가능
사용 예시	약 복용 리마인더, 예약 알림	마케팅, 커뮤니티, 메시지
설정 난이도	쉬움	어려움 (Firebase 등 연동)

---

🧠 알림 구현 실전 팁

• 알림 권한 요청은 앱 시작 시점 or 설정 페이지에서 명시적으로
• iOS는 별도 권한 요청이 필수 (requestPermissions)
• Android는 Android 13부터 알림 권한 필요
• 알림 탭 시 특정 화면으로 이동하려면 딥링크 처리 필요

---

📝 내가 느낀 점

처음엔 로컬 알림만 써도 충분하다고 생각했는데,
유저 리텐션을 높이려면 푸시 알림은 거의 필수라는 걸 느꼈다.
Firebase 연동은 어렵지만 한 번 구축해두면
마케팅, 실시간 메시지, 커뮤니티 앱에서 굉장히 강력한 기능이 된다.

---

🔔 “알림은 UX의 시작이자, 앱과 유저를 잇는 다리다.”

---