딥링크란?

• 딥링크는 특정 앱의 특정 화면으로 바로 이동할 수 있는 URL 방식의 기술이야. 웹에서는 특정 페이지로 이동하는 하이퍼링크와 비슷하지만, 앱에서는 앱이 실행된 상태에서 특정 화면으로 이동하는 기능을 수행해.

딥링크의 주요 기능

✅ 앱이 설치되어 있다면 → 앱의 특정 화면으로 이동

✅ 앱이 설치되지 않았다면 → 앱스토어 또는 웹사이트로 연결 가능

✅ 웹과 앱을 연결하여 사용자 경험(UX) 개선 가능

✅ 마케팅, 푸시 알림, 이메일, QR 코드에서 활용 가능

딥링크의 종류와 차이점

React Native에서의 딥링크 응용 예제

Android 설정 (AndroidManifest.xml 수정)

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="myapp" android:host="profile"/>
</intent-filter>

iOS 설정 (ios/Info.plist 수정)

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

<aside> 💡

기본 딥링크에서 스토어 이동 구현 하는 법

</aside>

const openAppOrStore = () => {
  window.location.href = 'myapp://profile/123'; // 기본 딥링크 실행

  setTimeout(() => {
    window.location.href = '<https://play.google.com/store/apps/details?id=com.myapp>';
  }, 2000); // 2초 후 앱스토어로 이동
};

// 버튼 클릭 시 실행
<button onClick={openAppOrStore}>앱에서 열기</button>

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Linking } from 'react-native';

// 페이지 컴포넌트
const HomeScreen = ({ navigation }) => (
  <View>
    <Text>홈 화면</Text>
  </View>
);

const ProfileScreen = ({ route }) => (
  <View>
    <Text>사용자 ID: {route.params?.id}</Text>
  </View>
);

const ProductScreen = ({ route }) => (
  <View>
    <Text>상품 ID: {route.params?.id}</Text>
  </View>
);

const Stack = createStackNavigator();

// 📌 딥링크 설정
const linking = {
  prefixes: ['myapp://', '<https://myapp.com>'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:id', // myapp://profile/123
      Product: 'product/:id', // myapp://product/456
    },
  },
};

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Product" component={ProductScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}