[Firebase] Firebase Dynamic Link

안녕하세요. 모리스입니다.😀

이번 포스트는 Firebase의 Dynamic Link를 React Native에서 사용하는 방법에 대해서 작성해 볼까 합니다.

그럼 사용법에 앞서 Dynamic Link가 뭔지 부터 알아보고 갈게요!

그럼 시작해 볼게요!

 

🔍 Dynamic Link란?

Dynamic Link를 이해하려면 먼저 Deep Link 개념을 알아야 합니다.
Deep Link는 웹에서 특정 페이지로 바로 이동할 수 있는 링크를 의미합니다.
모바일에서도 비슷하게 특정 화면으로 바로 이동할 수 있지만, 웹과 달리 모바일은 플랫폼(Android/iOS)의 차이, 앱 설치 여부 등 다양한 조건이 필요하죠.

Firebase의 Dynamic Link는 이러한 Deep Link의 한계를 보완해줍니다.
즉, 앱이 설치되어 있든 아니든, iOS든 Android든, 사용자가 특정 링크를 클릭했을 때 원하는 화면으로 이동시켜주는 스마트한 링크입니다.

 

🔧 Dynamic Link 생성하기

1. Firebase Console 접속 후 좌측 탭에서 Dynamic Links 선택
2. 시작하기 버튼을 누르고, 사용할 URL 프리픽스를 생성합니다.
   (일반적으로 xxxxx.page.link 형식을 많이 사용합니다.)
3. 프리픽스를 생성한 후, 새 동적 링크 클릭
4. 링크 경로 및 동작 설정
   • URL 끝에 붙는 식별자 입력 (예: /app, /referral, /promo)
   • 사용자가 해당 링크를 클릭했을 때 이동할 딥 링크 URL 설정
5. 앱에서 열 수 있도록 플랫폼 설정 (Android, iOS)
   • 앱이 설치되어 있으면 바로 열고, 아니면 스토어로 이동합니다.

📲 React Native에서 Dynamic Link 수신하기

React Native 앱에서 Dynamic Link를 수신하려면 @react-native-firebase/dynamic-links 모듈을 사용해야 합니다.

참고로, @react-native-firebase/app도 함께 설치되어 있어야 합니다.

📦 설치

# npm
npm install @react-native-firebase/dynamic-links

# yarn
yarn add @react-native-firebase/dynamic-links

 

 

📥 Dynamic Link 수신 방법

1. 앱 실행 중 (foreground) 수신

import React, { useEffect } from 'react';
import dynamicLinks from '@react-native-firebase/dynamic-links';

function App() {
  useEffect(() => {
    const unsubscribe = dynamicLinks().onLink((link) => {
      if (link?.url === 'https://yourLink.page.link/app') {
        // 원하는 동작 수행
      }
    });

    return () => unsubscribe();
  }, []);

  return <>;
}

2. 앱이 종료된 상태 (background / cold start)에서 수신

import React, { useEffect } from 'react';
import dynamicLinks from '@react-native-firebase/dynamic-links';

function App() {
  useEffect(() => {
    dynamicLinks()
      .getInitialLink()
      .then((link) => {
        if (link?.url === 'https://yourLink.page.link/app') {
          // 원하는 동작 수행
        }
      });
  }, []);

  return <>;
}

 

 

📚 참고 문서

Dynamic Links | React Native Firebase

동적 링크 URL 직접 만들기  |  Firebase Dynamic Links