React Native 푸시 알림 설정하기: Firebase와 OneSignal 사용법

푸시 알림은 사용자가 앱과 지속적으로 상호작용하도록 유도하는 데 중요한 역할을 합니다. React Native 애플리케이션에서 푸시 알림을 사용해 보신 적이 있으신가요? 그렇지 않다면, 이 가이드는 Firebase와 OneSignal을 사용하여 푸시 알림을 설정하는 방법에 대해서 알려드립니다.

Firebase 설정하기

Firebase는 Google에서 제공하는 서비스로, 여러 가지 앱 개발 도구와 백엔드 서비스를 강력하고 쉽게 제공합니다. Firebase를 통해 푸시 알림을 설정하기 위해 다음 단계를 따릅니다:

1. Firebase 프로젝트 생성

먼저 Firebase 콘솔로 이동해 새 프로젝트를 생성합니다. 생성된 프로젝트에서 Firebase 클라우드 메시징을 활성화합니다.

2. React Native와 Firebase 연동

프로젝트 루트 디렉토리에서 firebase 및 @react-native-firebase 관련 패키지를 설치합니다:

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

설치 후 firebase를 초기화하는 코드를 추가해야 합니다. 프로젝트의 App.js 파일을 다음과 같이 수정합니다:

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

// Firebase 초기화
if (!firebase.apps.length) {
  firebase.initializeApp({
    // 설정에서 복사한 Firebase 구성 값들
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
  });
}

3. 클라우드 메시징 활성화

Firebase 콘솔에서 클라우드 메시징을 설정하고 서버 키를 얻어야 합니다. 이 서버 키는 Firebase 클라우드 메시징을 통해 푸시 알림을 전송하는 데 필요합니다.

4. 권한 요청

푸시 알림을 보내기 위해 사용자에게 권한을 요청해야 합니다. 이 코드를 App.js에 추가합니다:

javascript
useEffect(() => {
  (async () => {
    const authorizationStatus = await messaging().requestPermission();
    if (authorizationStatus) {
      console.log('Permission status:', authorizationStatus);
    }
  })();
}, []);

OneSignal 설정하기

OneSignal은 푸시 알림을 손쉽게 관리할 수 있도록 도와줍니다. Firebase의 서버 키를 입력하여 연동할 수 있습니다. 다음은 OneSignal을 설정하는 방법입니다:

1. OneSignal 계정 생성 및 앱 추가

OneSignal 웹사이트에 가입한 후 새로운 앱을 추가합니다.

2. Firebase 서버 키 입력

OneSignal 대시보드에서 Firebase 설정을 클릭한 후 Firebase 콘솔에서 얻은 서버 키를 입력합니다.

3. React Native와 OneSignal 연동

프로젝트 루트 디렉토리에서 onesignal 패키지를 설치합니다:

bash
npm install react-native-onesignal

그리고 App.js에 OneSignal 초기화 코드를 추가합니다:

javascript
import OneSignal from 'react-native-onesignal';

useEffect(() => {
  // OneSignal 초기화
  OneSignal.setAppId('YOUR_ONESIGNAL_APP_ID');

  // 디바이스 푸시 알림 설정
  OneSignal.promptForPushNotificationsWithUserResponse(response => {
    console.log('OneSignal Response:', response);
  });

  // 푸시 알림 수신 이벤트 핸들링
  OneSignal.setNotificationWillShowInForegroundHandler(notificationReceivedEvent => {
    console.log('OneSignal: notification will show in foreground:', notificationReceivedEvent);
  });

  OneSignal.setNotificationOpenedHandler(notification => {
    console.log('OneSignal: notification opened:', notification);
  });
}, []);

마무리

지금까지 Firebase와 OneSignal을 이용해 React Native 애플리케이션에서 푸시 알림을 설정하는 방법을 살펴보았습니다. 이를 통해 사용자가 앱을 더 자주 방문하고 상호작용할 수 있도록 유도할 수 있습니다. 푸시 알림은 강력한 도구이니 잘 활용해 보세요!