[react-native] IOS 딥링크 연결하기

ANDROID 딥링크를 얼마 전 연결하고,

오늘 IOS 딥링크를 연결하는데 반나절이라는...! 오랜시간을 쏟아서

다음에는 시간을 줄이고자 블로깅을 한다.

 

나는 URI스킴 방식으로 딥링크를 연결하고자 했다.

 

우선 참고한 자료는 엄청나게 많았지만, 가장 중요하고 유용했던 자료는 아래의 3개,

대체 왜 안되지!!! 싶을 때 중요한 도움을 줬던 자료들이다.

https://medium.com/hackernoon/react-native-deep-linking-for-ios-and-android-d33abfba7ef3 

React Native Deep Linking for iOS and Android

https://github.com/react-navigation/react-navigation/issues/798

Linking is working only if app is not running before opening deep link. · Issue #798 · react-navigation/react-navigation

https://reactnative.dev/docs/linking

Linking · React Native

 

우선

ios/[project_nm]/AppDelegate.m

파일에 아래의 코드들을 삽입한다.

 

React Native Linking 공식 문서에서 안내해 준 코드이며, 참고한 첫번째 블로그에서도 발견한 코드인데,

iOS 8.x or older 버전을 타겟팅 할 때 추가하라고 되어있다.

내 핸드폰은 최신버전이라 아래의 코드가 없이도 잘 작동하였는데, 혹시 모르니 추가해놨다.

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager 
           application:application openURL:url
           sourceApplication:sourceApplication 
           annotation:annotation
         ];
}

 

그리고 가장 중요한 코드!!!

 

React Native 공식 문서에서는 아래 처럼 넣으라고 했는데,

나는 페이스북 간편 로그인때문에 이미 일부 포함되어있는 코드였다.

/ iOS 9.x or newer
#import <React/RCTLinkingManager.h>

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

그래서 이걸 어떻게 추가해야하지... 싶다가

두번째 깃헙 이슈에서 정답을 발견!!!!!!! 

아래와 같이 추가하였다. 

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(nonnull NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  [[FBSDKApplicationDelegate sharedInstance] application:application
                                                 openURL:url
                                                 options:options];
//linking ----->
   if ([RCTLinkingManager application:application openURL:url sourceApplication:nil annotation:nil]) {
    return YES;
  } <-----------

  return YES;
}

 

그리고는 다시 첫번째 블로그를 참고하여 URL Types를 추가하였다.

 

그리고 이제 컴포넌트 내에 딥링크를 작동할 수 있게 하는 코드를 넣는다. (심플하게 해보자면 아래처럼)

나는 IOS와 ANDROID를 모두 이용해야 했고,

컴포넌트 동작이 복잡해서, 문제없이 페이지들을 오픈할 수 있게 테스트를 해보니

아래처럼 Linking이 OS에 따라 다르게 작동한다는 것을 알았다.

이걸 이용해서 코드들을 수정했고, 이제 모두 잘 작동하는 것을 확인했다.

useEffect(() => {
	//IOS && ANDROID : 앱이 딥링크로 처음 실행될때, 앱이 열려있지 않을 때
        Linking.getInitialURL()
            .then((url) => deepLink(url))
            
        //IOS : 앱이 딥링크로 처음 실행될때, 앱이 열려있지 않을 때 && 앱이 실행 중일 때
        //ANDROID : 앱이 실행 중일 때
        Linking.addEventListener('url', addListenerLink);
        
        return () => remover();
    }, [])

    const deepLink = (url) => { 
        if (url) {
            navigate('OTHER_PAGE', { share: url })
        }
    };

    const addListenerLink = ({url}) => { 
        if (url) {
            navigate('OTHER_PAGE', { share: url })
        }
    };
    
    const remover = () => {
        Linking.removeEventListener('url')
    };

 

이것저것 시도해보다 엄청 오래 걸렸는데,

포스팅은 엄청 짧게 정리가 되다니...

그래도 앞으로는 한결 쉽게 딥링크를 연결할 수 있겠다 ! 

햅삐 :))