React Native Academy · 강의

포그라운드 및 백그라운드 알림 처리

앱이 열려 있을 때는 addNotificationReceivedListener로 알림을 처리하고, 사용자가 알림을 탭했을 때는 addNotificationResponseReceivedListener로 응답합니다.

포그라운드 및 백그라운드 알림 처리은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

App States and Notification Delivery

Your app can be in three states when a notification arrives: foreground (app is open and visible), background (app is running but not visible), or killed (app is not running at all). Each state has different handling requirements and different APIs to use.

Understanding which state applies is critical because the OS delivers notifications differently in each case and the user's tap response routes through different code paths depending on the app state at the time they tap.

addNotificationReceivedListener

Notifications.addNotificationReceivedListener fires when a notification arrives while the app is in the foreground. By default, notifications do not show a banner or sound when the app is already open — you must handle them in-app. The listener receives the full notification object including all content and data payload.

Use this to show in-app banners, update UI (e.g., refresh a chat thread), or play a custom sound — giving users the same experience as if the notification had arrived while the app was in the background.

import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';

useEffect(() => {
  const subscription = Notifications.addNotificationReceivedListener(
    (notification) => {
      const { title, body, data } = notification.request.content;
      console.log('Notification received in foreground:', title, body);
      // Update UI or show in-app banner:
      showInAppBanner({ title, body });
    }
  );

  return () => subscription.remove();
}, []);

addNotificationResponseReceivedListener

Notifications.addNotificationResponseReceivedListener fires when the user taps a notification, regardless of whether the app was in the background or killed. The listener receives a response object that contains the notification, the action identifier (which button was tapped), and any user text input.

Use this to navigate to the relevant screen based on the notification's data payload. This is the most important notification handler because it drives the deep navigation behavior users expect when tapping a notification.

useEffect(() => {
  const subscription = Notifications.addNotificationResponseReceivedListener(
    (response) => {
      const { data } = response.notification.request.content;
      console.log('User tapped notification:', data);

      if (data.screen) {
        navigation.navigate(data.screen, { id: data.id });
      }
    }
  );

  return () => subscription.remove();
}, []);

Notification Data Payload Design

The data field in a push notification is your app's contract with itself — it determines what happens when the notification is tapped. Design a consistent schema that includes the destination screen name and all parameters that screen needs.

A well-designed data payload allows any notification to navigate to precisely the right screen with the right content without any guessing. Use type-safe constants for action types to prevent typos causing silent navigation failures.

// Consistent data payload schema:
const notificationData = {
  type: 'new_message',   // action type
  screen: 'Chat',        // destination screen name
  conversationId: 'abc', // screen params
  senderId: '123',
};

// Response handler:
const { type, screen, conversationId } = response.notification.request.content.data;

switch (type) {
  case 'new_message':
    navigation.navigate(screen, { conversationId });
    break;
  case 'order_update':
    navigation.navigate('OrderDetail', { orderId: data.orderId });
    break;
}

Foreground Notification Display Control

By default in expo-notifications, notifications received while the app is in the foreground are silent (no banner, no sound). Control this with the setNotificationHandler set at app startup. The handler function is async — you can even make an API call to decide whether to show a notification based on user preferences.

Return shouldShowAlert: true to show the system banner even when the app is open. This is appropriate for notifications from other users (messages) but often not for your own app's activity notifications.

Notifications.setNotificationHandler({
  handleNotification: async (notification) => {
    const { type } = notification.request.content.data;
    // Show banner for messages but not for own activity:
    return {
      shouldShowAlert: type !== 'own_activity',
      shouldPlaySound: type === 'new_message',
      shouldSetBadge: true,
    };
  },
});

Background Notification Handling on iOS

On iOS, you can configure background notifications (silent push notifications) that wake the app in the background to fetch data without showing a banner. Set content-available: 1 in the APNs payload. The app gets a short window (~30 seconds) to fetch data.

Background fetch is useful for pre-loading content before the user opens the app from a notification, ensuring the screen is ready instantly. Handle it with expo-notifications' background notification tasks using Expo's task manager.

import * as TaskManager from 'expo-task-manager';
import * as Notifications from 'expo-notifications';

const BACKGROUND_NOTIFICATION_TASK = 'background-notification';

TaskManager.defineTask(BACKGROUND_NOTIFICATION_TASK,
  async ({ data: { notification }, error }) => {
    if (error) return;
    // Fetch fresh data silently in the background:
    await prefetchDataForNotification(notification.request.content.data);
  }
);

Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);

Notification Action Buttons

Notifications can include action buttons that let users respond without opening the app. For example, a message notification might have 'Reply' and 'Mark Read' buttons. Configure categories with Notifications.setNotificationCategoryAsync and reference the category in your push payload.

The tap response listener's response.actionIdentifier tells you which button was tapped. For text input actions, response.userText contains what the user typed directly from the notification.

// Define notification category with actions:
await Notifications.setNotificationCategoryAsync('message', [
  {
    identifier: 'reply',
    buttonTitle: 'Reply',
    textInput: { submitButtonTitle: 'Send', placeholder: 'Type a reply...' },
  },
  {
    identifier: 'mark_read',
    buttonTitle: 'Mark as Read',
    isDestructive: false,
  },
]);

// In response listener:
if (response.actionIdentifier === 'reply') {
  sendReply(response.userText, messageId);
}

Managing Badge Count

The badge count is the red number on your iOS app icon. Set it by including a badge number in your push payload, or update it from within the app using Notifications.setBadgeCountAsync(count). Reduce the badge when the user reads notifications or visits the relevant screen.

A common pattern: server sets badge to unread count when sending a push, and app calls setBadgeCountAsync(0) when the user opens the inbox. Always fetch the true unread count from your server rather than incrementing a local counter, since multiple devices must stay in sync.

import * as Notifications from 'expo-notifications';

// Clear badge when user opens inbox:
async function clearBadge() {
  await Notifications.setBadgeCountAsync(0);
}

// Get current badge count:
const count = await Notifications.getBadgeCountAsync();
console.log('Current badge:', count);

// Update badge from server-returned unread count:
async function updateBadge(unreadCount) {
  await Notifications.setBadgeCountAsync(unreadCount);
}

Dismissing Displayed Notifications

After reading a notification in-app, you should dismiss the corresponding notification from the notification center so it doesn't mislead the user. Use Notifications.dismissNotificationAsync(identifier) for a specific notification or Notifications.dismissAllNotificationsAsync() to clear all.

Call dismiss in the notification response handler after navigating to the relevant screen, or in useEffect on the target screen when it mounts. The notification identifier is available in the response object.

const subscription = Notifications.addNotificationResponseReceivedListener(
  async (response) => {
    const { data } = response.notification.request.content;
    const notifId = response.notification.request.identifier;

    // Navigate to relevant screen:
    navigation.navigate(data.screen, { id: data.id });

    // Dismiss the notification from notification center:
    await Notifications.dismissNotificationAsync(notifId);
  }
);

Getting All Pending Notifications

Retrieve all currently displayed notifications in the notification center with Notifications.getPresentedNotificationsAsync(). Use this on app launch to handle any notifications the user hasn't tapped yet, or to display an unread count badge based on actual notification center contents.

On app foreground, you can also loop through pending notifications and dismiss ones that are now stale (e.g., expired promotions or events that have passed).

useEffect(() => {
  // When app comes to foreground:
  async function cleanupStaleNotifications() {
    const displayed = await Notifications.getPresentedNotificationsAsync();
    const now = Date.now();

    for (const notif of displayed) {
      const { expiresAt } = notif.request.content.data;
      if (expiresAt && expiresAt < now) {
        await Notifications.dismissNotificationAsync(notif.request.identifier);
      }
    }
  }
  cleanupStaleNotifications();
}, [appState]);

A Complete Notification Handler Setup

A production-ready notification setup combines all the pieces: set the handler at startup, register listeners in a custom hook, and wire them to navigation. The custom hook handles both foreground (show banner, update state) and tap responses (navigate), and always cleans up listeners on unmount.

This architecture keeps notification logic centralized, testable, and separate from individual screen components.

function useNotifications(navigation) {
  useEffect(() => {
    const received = Notifications.addNotificationReceivedListener(
      (notif) => handleForeground(notif)
    );
    const response = Notifications.addNotificationResponseReceivedListener(
      (resp) => handleTap(resp, navigation)
    );
    return () => {
      received.remove();
      response.remove();
    };
  }, [navigation]);
}

// Use in root component:
const navigation = useNavigation();
useNotifications(navigation);

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: addNotificationReceivedListener handles notifications arriving while the app is in the foreground, addNotificationResponseReceivedListener handles user taps on notifications from any app state and should navigate to the relevant screen, and action buttons with categories enable users to reply or take actions directly from the notification without opening the app. Next up we configure notification channels and add rich content like images and action buttons.

자주 묻는 질문

“포그라운드 및 백그라운드 알림 처리” 강의는 무료인가요?

네 — “포그라운드 및 백그라운드 알림 처리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“포그라운드 및 백그라운드 알림 처리”에서 뭘 배우나요?

앱이 열려 있을 때는 addNotificationReceivedListener로 알림을 처리하고, 사용자가 알림을 탭했을 때는 addNotificationResponseReceivedListener로 응답합니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“포그라운드 및 백그라운드 알림 처리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Native Academy(으)로 돌아가기