[React Navigation] Deep Linking 적용

React Native의 Linking을 사용해 보고자 했지만, 공식 문서의 구체적이지 못한 설명과 URL을 직접 파싱해야 하는 등의 과정이 필요하여 확인해 보니, React Navigation에서 Deep Linking 기능을 제공해 줌.

 

NavigationContainer의 lingking props에 linking에 관련된 설정을 전달해 주면 자동으로 처리해 주는 편리한 녀석.

 

각 OS별 (Android, IOS)로 추가적인 설정이 필요함. 설정 방안은 공식 문서에 잘 설명되어 있음.

 

Deep Linking 설정

NavigationContainer에 linking prop을 설정해 주면, 들어오는 링크들을 쉽게 다룰 수 있도록 해 줌. 이 중에서 linking prop에서 2가지 중요한 properties는 prefiexs와 config이고, 외에도 enabled, getInitalURL, subscribe 등이 있음.

 

const linking = {
  prefixes: [
    "https://obeyjy.tistory.com",
    "obeyjy://"
    /* 자유롭게 추가 가능 */
  ],
  config: {
    /* path에 매칭되는 screen을 설정 */
    invite : '/invite',
    register : '/register'
  },
};

위의 경우 prefixes에 https scheme와 obeyjy scheme를 수신할 수 있도록 설정하였음. 이에 따라, https://obeyjy.tistory.com/를 host로 하는 링크를 처리할 수 있으며, obeyjy://와 같은 intent 요청도 처리할 수 있음. 

config에는 들어온 주소에 따라 처리할 screen을 설정함, 위의 경우 'https://obeyjy.tistory.com/invite'로 요청이 들어온다면 invite라는 이름을 가진 screen으로 이동됨.

 

프로젝트에 사용된 네비게이션은 Bottom Tab, Stack Navigation으로 Bottom Tab이 Stack Navigation의 일부로 편입되어 있는 형태로 아래와 같은 구조로 구성이 되어 있었음.

 

EX) 

A Stack Navigation

  - Bottom Tab Navigation

     - BT-1 Stack Navigation

        - register

  - A-1 Stack Navigation

    - helper

 

위의 구조에서 들어온 주소에 따라 BT-1 Stack Navigation에 속해있는 register가 처리하게 하려면 config를 nested 구조로 작성하여 처리해야 함. 

const linking = {
  prefixes: [
    "https://obeyjy.tistory.com",
    "obeyjy://"
    /* 자유롭게 추가 가능 */
  ],
  config: {
    screens : {
    	bottom_tab : { # Bottom Tab Navigation name
        	screens : {
            	bt1stack : { # BT-1 Stack Navigation name
                	screens : {
                    	register : {
                        	path : '/register/:user',
                        }
                    }
                }
            }
         }
     }
  },
};

위와 같은 구조로 작성하게 되면, /register로 요청이 들어왔을 때 A Stack Navigation > Bottom Tab Navigation -> BT-1 Stack Navigation -> Register Screen으로 연결해 줄 수 있음. A Stack Navigation은 초기에 앱 초기화 시에 기본적으로 로딩이 되는 Navigation으로 별도의 이름을 가지고 있지 않을 뿐만 아니라 별도로 이름을 지정하지 않아도 Linking에는 문제가 없는 것 같다.

 

register 설정에 보면 path에 ':' 문자를 사용하였는데, 이를 사용하는 이유는 param으로 다루기 위해서다. 예를 들어서 위에서 :user의 역할은 /register/obeyjy라는 주소가 들어왔을 때 obeyjy의 값을 user라는 Key에 Value으로 설정 {user : 'obeyjy'} 하여 param으로 해당 스크린에 전달하며, 해당 스크린에서는 route.params.user를 이용하여 해당 파라미터를 사용할 수 있다.

 

추가로, 파라미터 설정에 대한 기능 (parse, stringify)을 제공하고 있으며 나만의 커스텀 함수를 사용하여 값을 처리 후 스크린에 제공하는 것도 가능하다.

 

TroubleShooting

- linking config를 작성 시 Key 값으로 Component 명을 입력한 것

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/5.x/configuring-links for more details on how to specify a linking configuration. 

위 문제는 config의 screens 내부의 Key 값을 Screen의 Component 명을 넣었기 때문에 발생한 문제였다. Component 명이 아닌 screen name을 넣어주니 해결됨.

this.linking = {
      prefixes : ['https://www.abc.com'],
      config : {
        screens : {
          user_home : '/invite'
        }
      }
  };

 

 

https://reactnavigation.org/docs/5.x/deep-linking/

https://reactnavigation.org/docs/5.x/deep-linking/