갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편13 – 알림 설정 화면 모듈화 및 관리 기능 추가하기

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편13 – 알림 설정 화면 모듈화 및 관리 기능 추가하기

지금까지 우리는 Firebase 기반 클라우드 예약 알림을 만들었습니다.
하지만 앱을 사용하다 보면 알림을 수정하거나 삭제하고 싶을 때가 많죠?
이번 글에서는 알림 설정 화면을 모듈화하고 관리 기능(수정/삭제)을 추가하여
사용자 경험을 개선하는 방법을 알아봅니다. 🛠️🔔

---

✅ 1. 기능 요구사항 정리

기능 설명

알림 추가	제목과 내용을 입력하여 알림 추가
알림 수정	기존 알림의 제목과 내용을 수정
알림 삭제	불필요한 알림 삭제
목록 관리	설정된 알림 목록을 리스트로 확인

---

✅ 2. Firebase Firestore 데이터 구조

컬렉션 문서 ID 필드

alarms

{alarmId}

title, message, token, createdAt

---

✅ 3. Firebase 함수 수정 (NotificationService.js)

📄 Firebase 연동 및 알림 관리 함수

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

const alarmsCollection = firestore().collection('alarms');

// 알림 추가
export const addCloudAlarm = async (title, message) => {
  const token = await messaging().getToken();
  return alarmsCollection.add({
    title,
    message,
    token,
    createdAt: firestore.FieldValue.serverTimestamp(),
  });
};

// 알림 목록 가져오기
export const fetchAlarms = async () => {
  const snapshot = await alarmsCollection.get();
  return snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data(),
  }));
};

// 알림 수정
export const updateAlarm = async (id, title, message) => {
  return alarmsCollection.doc(id).update({ title, message });
};

// 알림 삭제
export const deleteAlarm = async (id) => {
  return alarmsCollection.doc(id).delete();
};

---

✅ 4. 프로젝트 구조

반응형

/services
  └── NotificationService.js
/screens
  ├── AlarmListScreen.js
  ├── EditAlarmScreen.js
App.js

---

✅ 5. 알림 목록 화면 구현 (AlarmListScreen.js)

📄 알림 목록 화면

import React, { useEffect, useState } from 'react';
import { View, Text, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { fetchAlarms, deleteAlarm } from '../services/NotificationService';

export default function AlarmListScreen({ navigation }) {
  const [alarms, setAlarms] = useState([]);

  useEffect(() => {
    const loadAlarms = async () => {
      const data = await fetchAlarms();
      setAlarms(data);
    };
    loadAlarms();
  }, []);

  const handleDelete = async (id) => {
    await deleteAlarm(id);
    setAlarms(alarms.filter(alarm => alarm.id !== id));
  };

  return (
    <View style={styles.container}>
      <Button title="알림 추가" onPress={() => navigation.navigate('EditAlarm')} />
      <FlatList
        data={alarms}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.alarmItem}
            onPress={() => navigation.navigate('EditAlarm', { alarm: item })}
          >
            <Text style={styles.title}>{item.title}</Text>
            <Button title="삭제" onPress={() => handleDelete(item.id)} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  alarmItem: { padding: 15, backgroundColor: '#f9f9f9', marginBottom: 10 },
  title: { fontSize: 18 },
});

---

✅ 6. 알림 추가/수정 화면 구현 (EditAlarmScreen.js)

📄 알림 추가/수정 화면

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import { addCloudAlarm, updateAlarm } from '../services/NotificationService';

export default function EditAlarmScreen({ route, navigation }) {
  const [title, setTitle] = useState(route.params?.alarm?.title || '');
  const [message, setMessage] = useState(route.params?.alarm?.message || '');
  const alarmId = route.params?.alarm?.id;

  const handleSave = async () => {
    if (alarmId) {
      await updateAlarm(alarmId, title, message);
      alert('알림이 수정되었습니다.');
    } else {
      await addCloudAlarm(title, message);
      alert('알림이 추가되었습니다.');
    }
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="알림 제목"
        value={title}
        onChangeText={setTitle}
        style={styles.input}
      />
      <TextInput
        placeholder="알림 내용"
        value={message}
        onChangeText={setMessage}
        style={styles.input}
      />
      <Button title={alarmId ? "수정하기" : "추가하기"} onPress={handleSave} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  input: { borderWidth: 1, marginBottom: 10, padding: 10, borderRadius: 6 },
});

---

✅ 7. App.js 수정 (네비게이션 설정)

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AlarmListScreen from './screens/AlarmListScreen';
import EditAlarmScreen from './screens/EditAlarmScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="AlarmList">
        <Stack.Screen name="AlarmList" component={AlarmListScreen} options={{ title: '알림 목록' }} />
        <Stack.Screen name="EditAlarm" component={EditAlarmScreen} options={{ title: '알림 설정' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

✅ 8. 실행 결과 확인

1. 알림 목록 화면에서 "알림 추가" 버튼 클릭
2. 알림 제목과 내용 입력 → 추가
3. 목록에 추가된 알림 확인
4. 알림 클릭 → 수정 화면 이동 → 수정 후 저장
5. 삭제 버튼으로 알림 삭제 확인

---

✅ 9. 이번 글에서 배운 것

• 알림 목록을 리스트로 관리하여 직관성 향상
• 알림 추가, 수정, 삭제 기능 구현으로 완성도 강화
• Firebase Firestore와 연동하여 알림 데이터를 클라우드에서 관리

---

📘 다음 확장 예고

알림 히스토리 관리 (지난 알림 확인)
사용자 설정에 따라 반복 주기 커스터마이징
알림 소리 및 진동 설정 추가

---

 

React Native 알림 관리,React Native Firebase 알림 추가,React Native 알림 수정 삭제,React Native Firestore 알림 관리,React Native 푸시 알림 수정,React Native FCM 알림 관리,React Native 클라우드 알림 저장,React Native 예약 알림 관리,React Native 알림 목록,React Native 알림 설정 화면

---