리액트 네이티브(React Native) 연동하기

플레어레인을 사용하여 리액트 네이티브(React Native) 앱 푸시 알림을 코드 1줄로 구현할 수 있습니다.
1. 사전 준비 
타 푸시 솔루션과 함께 사용할 수 있습니다!
병행 사용을 위해서는 iOS: Swizzling 비활성화﻿ 가이드를 참고하여 몇 가지 작업을 추가해야합니다.
﻿플레어레인 관리자 에서 회원가입 후 프로젝트 생성
﻿
2. 인증 값 설정
아래 가이드를 참고하여 플레어레인에 푸시 발송에 필요한 인증 값을 입력합니다.
﻿Android: FCM 인증 정보 설정﻿﻿
﻿iOS: APNS 인증 정보 설정﻿﻿
﻿
3. SDK 설치 
터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다
Terminal
$ yarn add @flarelane/react-native-sdk@1.4.0
$ yarn add @flarelane/react-native-sdk@1.4.0
﻿
﻿
4. Android 13 지원
유저로부터 푸시 알림 구독을 원활히 받아낼 수 있도록 compileSdkVersion을 최소 33으로 지정해주세요.
app/build.gradle
android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}
android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}
﻿
﻿
5. iOS 프로젝트 설정 
 터미널에서 cd ios 를 입력하여 ios 디렉토리로 이동합니다.

 Podfile 파일의 상단에 platform :ios, '12.0' 혹은 그 이상을 입력합니다.

 pod install 을 입력하여 CocoaPods 설치를 완료합니다.

 <YOUR_PROJECT_NAME>.xcworkspace 파일을 열어 Xcode 프로젝트를 실행합니다.

 대상 PROJECT의 Deployment Target 을 12.0 혹은 그 이상으로 입력합니다.

 대상 TARGET의 Minimum Deployments을 12.0 혹은 그 이상으로 입력합니다.

 앱푸시 발송 권한을 추가합니다. Target 의 "Signing & Capabilites" 탭으로 들어와 좌상단의 "+ Capability" 를 클릭합니다.

"Push Notifications" 를 선택하여 추가합니다.
﻿
﻿
6. 초기화 코드 작성  
메인 App(ex. App.tsx)에 다음 초기화 코드를 입력합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.
플레어레인 SDK가 제공하는 함수 리스트는  Mobile Push SDK Reference﻿ 에서 확인할 수 있습니다.
App.tsx
import FlareLane from '@flarelane/react-native-sdk';

// 알림 권한 팝업 타이밍을 제어하려면 2번째 파라미터를 false로 설정 후 적절한 시점에 .subscribe() 함수 실행
FlareLane.initialize('PROJECT_ID', true);
import FlareLane from '@flarelane/react-native-sdk';

// 알림 권한 팝업 타이밍을 제어하려면 2번째 파라미터를 false로 설정 후 적절한 시점에 .subscribe() 함수 실행
FlareLane.initialize('PROJECT_ID', true);
﻿
﻿
7. 테스트
여기까지 모두 완료하셨으면 앱 빌드, 실행 시 자동으로 플레어레인 전체 기기 리스트에 추가됩니다.
실제 배포 전, 푸시를 실제 발송하여 기기에 잘 오는지, 푸시 클릭 시 통계에 잘 잡히는지 반드시 직접 확인하시기 바랍니다.
﻿
8. 추가 개발 연동
푸시 알림 아이콘을 별도 설정하고 싶습니다.
[Android] Android: 알림 아이콘 설정﻿ 을 참고하여 아이콘 애셋 세팅을 합니다.
[iOS] 기존 앱 아이콘을 기본으로 따릅니다.
푸시 알림에 이미지 첨부를 하고 싶습니다.
[Android] 추가 작업이 필요하지 않습니다.
[iOS] iOS: Rich Notification﻿ 을 참고하여 Notification Extension 세팅을 합니다.
초개인화 마케팅을 위해 고객 데이터를 연동합니다.
 고객 여정 자동화﻿ 및 메시지 개인화﻿ 등 초개인화 푸시 마케팅에 필요한 고객 데이터 연동﻿을 진행합니다.
푸시 클릭 시 동작을 정의하고 싶습니다.
﻿Mobile Push SDK Reference﻿ 내 setNotificationConvertedHandler 함수를 사용합니다.
﻿