[react-native] deeplink URL Schemes 예제 [1] deeplink 제어하기

 

---

인터넷 창에서 주소 url 을 입력해서 원하는 웹 페이지에 접속하는 것처럼

 

앱에도 특정 페에지에 도달하게끔 해주는 딥링크라는 것이 있다

 

이번 포스팅에서는 딥링크를 클릭해서 앱에 접근했을 때, 해당 접근을 처리 및 제어하는 간단한 예제를 작성할 것이다

 

거의 대부분이 네이티브 언어를 수정하는 일이라 약간 이해가 되지 않는 부분도 있다

 

react-native 개발환경이 구성되어 있다는 전제조건으로 진행할 예정이다

---

 

1

IOS

 

1.1

프로젝트의 ios 폴더 내부 AppDelegate.m 파일 수정

 

#import <React/RCTLinkingManager.h> - (BOOL)application:(UIApplication *)application
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    
  return [RCTLinkingManager application:application openURL:url options:options];
}

 

URL을 통해 앱에 접속했을 때, URL을 제어해주기 위해 위의 내용을 입력한다

 

Import 는 꼭 최상단에 입력해준다

 

 

1.2

Xcode -> 왼쪽 폴더 클릭 -> 프로젝트 클릭 -> Info 클릭

 

해당 경로에 들어가면 Info 제일 하단에 URL Types라는 항목이 있다

 

URL Schemes 항목에 사용하려는 스킴을 설정해준다

 

 

 URL Types에서 설정하려는 스킴을 허용함과 동시에, 해당 스킴으로 만들어진 딥링크를 클릭했을 때,

앱을 찾을 수 있게 해준다

 

만약에 TestDeepLink 라고 입력했으면, TestDeepLink://... 로만들어진 딥링크는 해당 앱을 참조한다

주의 :

몇몇 광고 추적 플랫폼에서 딥링크를 생성할 경우, 딥링크를 만들 때 'TestDeepLink://testDeep?~' 처럼

host를 붙일 경우, Identifier에 testDeep을 입력해야 딥링크 경로를 제대로 찾는 경우도 있었다

 

모두 제대로 설정했는데도 딥링크가 작동하지 않는다 ? 

 

충분히 의심해볼 만한 사항이다

 

 

---

2

AOS

 

안드로이드 설정은 간단하다

 

1.1

AndroidMenifest.xml 수정

 

android > app > src > main 경로의 AndroidMenifest 파일을 연다

 

     <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:host="testDeep" android:scheme="TestDeepLink" />
     </intent-filter>     

위 처럼 intent-filter 태그를 설정해준다

 

 

모든 설정이 완료된 후, 

pod install 

을 진행하고 

 

AOS,IOS 모두 빌드를 한다 

 

여기까지 네이티브 언어를 수정해줬으면 TestDeepLink라는 앱 스킴으로

딥링크를 통해서 해당 앱에 접속하는 것이 가능하다

 

그러면

해당 링크를 클릭해서 진입했을 때, 

 

앱에서 제어하는 코드를 작성해야한다

 

앱에 진입했을 때, 제일 먼저 들어오는 상위 컴포넌트에 해당 코드를 작성하자

 

해당 코드에서 console 로 로그를 찍어보면 어떤 링크를 타고 앱에 들어왔는지 알 수 있다

 

해당 URL을 통해 파라미터를 파싱해서 경로를 분기해주면 된다

 

해당 컴포넌트는 Class 컴포넌트로 작성되어 있어서 componentDidMount 를 사용했지만,

 

함수형 컴포넌트에서는 useEffect를 사용해서 앱에 진입했을 때, 실행시키면 된다

import { Linking } from 'react-native';
 
 
class App extends React.Component {
    ...
    ...
 
 
    componentDidMount() {
        this.handleDeepLink();
    }
 
 
 
    /*딥링크 */
  handleDeepLink(){
    Linking.getInitialURL().then(res => { //앱이 실행되지 않은 상태에서 요청이 왔을 때
      if(res == null || res == undefined || res == ""){
        return;
      }else{
        var params = urlParamtersToJson(res);
        console.log(params);
      }
    });
    Linking.addEventListener('url', (e) => {        // 앱이 실행되어있는 상태에서 요청이 왔을 때 처리하는 이벤트 등록
      var params = urlParamtersToJson(e.url); 
      if(e.url == null || e.url == undefined || e.url == ""){
        return;
      }else{
        console.log(params);
      }
    });
  }
 
 
}