react native에서 URL object가 제대로 동작하지 않는 경우

react native를 이용한 앱에서 적절한 URL scheme를 만들어줘야할 일이 있었다.

https://guide.ncloud-docs.com/docs/naveropenapiv3-maps-url-scheme-url-scheme

지도앱 연동 URL Scheme - Maps

테스트 환경

"react": "18.1.0",
"react-native": "0.70.2",

 

문제상황

  const getUrlScheme = (params: NaverRouteParams) => {
    const result = new URL('nmap://route/car');

    Object.entries(params).forEach(([key, value]) => {
      result.searchParams.append(key, `${value}`);
    });

    result.searchParams.append('appname', APP_NAME);

    return result;
  };

이러한 function을 만들어 줬는데 이해할수 없는 동작을 하였다.

//기대한 동작
nmap://route/car?PARM1=VAL1&PARAM2=VAL2

//실제 동작
nmap://route/car/?PARM1=VAL1&PARAM2=VAL2 // ????

 

다른 환경에서 시도

웹에서 똑같은 함수를 만들어 테스트 -> 기대한 동작

테스트용 rn app에서 테스트 -> 이상하게 동작

 

서칭

rn의 문제인거 같아 서칭을 해보니

https://stackoverflow.com/questions/44038180/react-native-parse-url-to-get-query-variable

React Native - Parse URL to get Query Variable

Sadly, the implementation of URL in React Native is not complete and has some known bugs.
Fortunately, there is a solid polyfill library called
"react-native-url-polyfill" which provides an implementation of URL
 that is well behaved and tested - I highly recommend it.

react native에서는 URL object에 대한 버그가 있으므로 

https://github.com/charpeni/react-native-url-polyfill#option-1-simple

GitHub - charpeni/react-native-url-polyfill: 🔗A lightweight and trustworthy URL polyfill for React Native.

이 pollyfill을 사용해서 해결하라는 내용이다.

 

해결

이 pollyfill을 추가해주면 기대했던 동작이 실행된다.

//기대한 동작
nmap://route/car?PARM1=VAL1&PARAM2=VAL2

 

참고할만한 사항

pollyfill의 이 3번째 option은 문제가 있으므로 option 1을 사용하는게 속편하다.

https://github.com/charpeni/react-native-url-polyfill/issues/369

Typescript error: Expected 0 arguments, but got 1.ts(2554) (parameter) url: string · Issue #369 · charpeni/react-native-url-po

---

 

 

rn은 가끔씩 끔찍하다...