갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편8 – 반복 알림 구현하기 (매일/매주 알림 설정)

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편8 – 반복 알림 구현하기 (매일/매주 알림 설정)

할 일 관리 앱이나 알림 앱에서 매일 같은 시간에 알림이 울리도록 설정하고 싶지 않으신가요?
이번 글에서는 React Native와 PushNotification을 사용하여
매일/매주 반복되는 알림을 자동으로 보내는 기능을 구현해보겠습니다. 🔁🔔

---

✅ 1. 반복 알림이 필요한 이유

• 기상 알림: 매일 아침 7시에 알림
• 운동 리마인더: 매주 월, 수, 금 저녁 7시에 알림
• 루틴 관리: 매일 같은 시간에 습관 형성 유도

---

✅ 2. 알림 반복 주기 옵션

옵션 설명

minute	매 분 반복 (테스트용)
hour	매 시간 반복
day	매일 같은 시간
week	매주 같은 요일과 시간
month	매달 같은 날짜와 시간

---

✅ 3. 알림 반복 예약 함수 만들기

📄 NotificationService.js

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

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

// 반복 알림 설정
export const scheduleRepeatingNotification = (title, message, repeatType) => {
  PushNotification.localNotificationSchedule({
    channelId: "default-channel-id",
    title: title,
    message: message,
    repeatType: repeatType, // day, week, month, minute
    date: new Date(Date.now() + 10 * 1000), // 10초 후 알림 시작
    allowWhileIdle: true,
  });
};

---

✅ 4. App.js에 기본 설정 추가

반응형

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

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

  const handleDailyAlarm = () => {
    scheduleRepeatingNotification("매일 알림", "매일 같은 시간에 울리는 알림입니다.", "day");
  };

  const handleWeeklyAlarm = () => {
    scheduleRepeatingNotification("매주 알림", "매주 같은 요일에 울리는 알림입니다.", "week");
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>반복 알림 설정</Text>
      <Button title="매일 알림 설정" onPress={handleDailyAlarm} />
      <Button title="매주 알림 설정" onPress={handleWeeklyAlarm} />
    </View>
  );
}

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

---

✅ 5. 실행 테스트

1. 앱 실행 후 "매일 알림 설정" 버튼 클릭
2. 10초 후 알림 수신 확인
3. 이후, 매일 같은 시간에 알림 수신
4. "매주 알림 설정"도 동일 방식으로 테스트

---

✅ 6. 반복 알림 관리

📄 반복 알림 삭제 함수

// 특정 알림 취소
export const cancelAlarm = (id) => {
  PushNotification.cancelLocalNotifications({ id });
};

// 모든 반복 알림 취소
export const cancelAllAlarms = () => {
  PushNotification.cancelAllLocalNotifications();
};

---

📄 App.js 수정: 알림 취소 기능 추가

const handleCancelAlarms = () => {
  cancelAllAlarms();
  alert("모든 반복 알림이 취소되었습니다.");
};

<Button title="모든 알림 취소" onPress={handleCancelAlarms} />

---

✅ 7. 주의사항 및 한계점

한계점 해결 방법

Android에서만 완벽 지원	iOS의 경우 Background Task 설정 필요
앱이 완전히 종료되면 실행 안 될 수 있음	Headless Task 사용 고려
Firebase와 통합 필요성	클라우드 기반 반복 알림으로 개선 가능

---

✅ 8. 실전 활용 예제

상황 사용법

운동 루틴 관리	repeatType: "day" → 매일 특정 시간 운동 알림
업무 리마인더	repeatType: "week" → 매주 월, 수, 금 오전 9시 알림
월간 체크리스트	repeatType: "month" → 매달 1일 오전 10시 알림

---

✅ 9. 이번 글에서 배운 것

• 반복 알림의 필요성 및 구현 방법
• react-native-push-notification을 활용한 반복 알림 설정
• 알림 관리 및 취소 방법
• 실전 활용 시 고려 사항

---

📘 다음 확장 예고

반복 알림에 사용자 입력 추가하기 (커스텀 반복 주기)
Firebase 연동하여 클라우드 기반 반복 알림 관리
Headless Task로 앱 종료 시에도 반복 알림 유지하기

---

 

React Native 반복 알림,React Native 알림 설정,React Native 매일 알림,React Native PushNotification 반복,React Native 알림 주기 설정,React Native 알림 취소,React Native 매주 알림 설정,React Native 앱 반복 알림,React Native 알림 관리,React Native 알림 주기 변경

---