갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편6 – 예약 알림 구현하기 (정해진 시간에 푸시 보내기)

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편6 – 예약 알림 구현하기 (정해진 시간에 푸시 보내기)

지난 글에서 Firebase Cloud Messaging(FCM) 을 이용해
실시간 알림을 구현했죠?
이번에는 예약 알림을 구현하여,
정해진 시간에 푸시 알림을 보낼 수 있도록 만들어보겠습니다. 🔔⏰

---

✅ 1. 예약 알림이 필요한 이유

• 리마인더 앱: 사용자가 설정한 시간에 할 일을 알림
• 기념일 알림: 특정 날짜에 맞춰 축하 메시지
• 예약 작업 알림: 주기적으로 반복되는 작업 알림

---

✅ 2. 예약 알림 구현 흐름

단계 설명

1. 권한 요청	푸시 알림 권한을 먼저 받아야 함
2. 예약 설정	사용자가 원하는 시간에 알림 예약
3. 알림 트리거	예약 시간이 되면 푸시 알림 표시

---

✅ 3. 필요 라이브러리 설치

FCM과 더불어 react-native-push-notification을 사용합니다.

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

---

✅ 4. 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'

📄 AndroidManifest.xml

---

✅ 5. 예약 알림 설정

📄 NotificationService.js

import PushNotification from 'react-native-push-notification';
import messaging from '@react-native-firebase/messaging';

// 초기 설정
export const configurePushNotifications = () => {
  PushNotification.configure({
    onNotification: function (notification) {
      console.log('알림 수신:', notification);
    },
    requestPermissions: true,
  });
};

// 예약 알림 설정
export const scheduleNotification = (title, message, date) => {
  PushNotification.localNotificationSchedule({
    channelId: "default-channel-id",
    title: title,
    message: message,
    date: date, // 예약 시간
    allowWhileIdle: true,
  });
};

// 푸시 채널 설정
export const createNotificationChannel = () => {
  PushNotification.createChannel(
    {
      channelId: "default-channel-id",
      channelName: "Default Channel",
    },
    (created) => console.log(`채널 생성: ${created}`),
  );
};

---

✅ 6. App.js에서 설정 적용

import React, { useEffect } from 'react';
import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
import { configurePushNotifications, scheduleNotification, createNotificationChannel } from './services/NotificationService';

export default function App() {
  useEffect(() => {
    configurePushNotifications();
    createNotificationChannel();
  }, []);

  const handleSchedule = () => {
    const date = new Date(Date.now() + 5 * 1000); // 5초 후 알림
    scheduleNotification("예약 알림", "5초 후에 도착합니다.", date);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>예약 알림 설정</Text>
      <Button title="5초 후 알림 예약" onPress={handleSchedule} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
});

---

✅ 7. 예약 알림 테스트

1. 앱 실행 후 "5초 후 알림 예약" 버튼 클릭
2. 5초 후 알림이 정상적으로 표시되는지 확인

---

✅ 8. 사용자 지정 예약 알림

📄 예약 시간 직접 입력

const handleCustomSchedule = (hours, minutes) => {
  const date = new Date();
  date.setHours(hours);
  date.setMinutes(minutes);
  scheduleNotification("맞춤 예약 알림", "지정한 시간에 알림이 도착합니다.", date);
};

---

✅ 9. 예약 알림 관리

기능 구현 방법

예약 수정	동일 ID로 알림 생성 시 기존 알림 덮어쓰기
예약 삭제	PushNotification.cancelLocalNotifications({id: '123'})
전체 삭제	PushNotification.cancelAllLocalNotifications()

---

✅ 10. 이 글에서 배운 것

• 예약 알림을 위한 라이브러리 설치 (react-native-push-notification)
• Android 설정 (채널 생성 포함)
• 예약 알림을 설정하고, 실행하는 방법
• 사용자 지정 시간으로 예약 알림 관리

---

📘 다음 확장 예고

Firebase와 연동하여 클라우드 기반 예약 알림 만들기
예약 알림을 리스트 형태로 관리하는 기능 추가
앱 실행 중/종료 시 알림 처리 차이점 다루기

---

 

React Native 예약 알림,React Native 푸시 알림 설정,React Native FCM 예약,React Native 알림 시간 설정,React Native 알림 라이브러리,React Native 알림 관리,React Native 알림 취소,React Native 알림 커스터마이즈,React Native 알림 테스트,React Native Firebase 알림 예약