React Navigation…쓰실 건가요?!

Hun Kyo Jung
Jul 25, 2017 · 7 min read

Update 2018.03.05
react-navgation 1.4.0 에서는 아래 언급된 문제들 중에 일부는 해결된 부분도 있습니다. 이 부분에 대해서는 별도로 포스팅 할 예정입니다.

React Native(이하 RN)으로 개발하면서 어떤 네비게이션 라이브러리를 쓸지 고민하게 될텐데 많이 쓰는 라이브러리들을 나열하자면 아래 정도가 되지 않을까 싶습니다.

저의 경우, 첫 번째 프로젝트에서는 RNRF를 사용했었습니다. 그런데 버그도 많고 유지보수도 안되서 직접 코드를 수정하는 일이 비일비재하게 되면서, 두번째 프로젝트에서는 RNRF을 버리고 다른 대안을 찾아보았습니다.

때마침 RN에서 제공하던 Navigator는 이제 구시대의 유물이 되어 deprecated가 되고 그 자리를 react-navigation으로 넘겨주었습니다. beta이지만 Facebook, Exponent 그리고 React community 개발자들이 같이 만든 라이브러리라서 어느 정도 신뢰가 가는 것도 있었고, RNRF를 사용하면서 겪었던 문제점들도 어느 정도 상쇄할 수도 있다는 생각에 과감히 선택했습니다.

그런데…

선택에는 항상 책임이 따르듯 개발 중에 이런 저런 문제점들이 보이기 시작했습니다. 어떤 건 쉽게 해결되기도 했지만 어떤 문제들은 해결책이 없어서 이슈들을 샅샅이 뒤져가며 workaround를 해야하는 상황도 발생할 수 밖에 없었습니다.

이 글을 적는 이유는 React Navigation을 선택과 동시에 적용하시는 것 보다는 이런 문제들이 존재하니 선택하기 전에 내가 개발하는 앱에 맞는 라이브러리인지 고민을 한 번 해보면 좋지 않을까 싶기 때문입니다.

Dynamic Routing

무엇이 문제인가?

initialRouteName을 동적으로 변경할 수가 없습니다. 일반적으로 앱을 실행 할 때 로그인 상태에 따라서 네비게이터의 initialRouteName을 변경해야 하는 경우가 있는데 prop을 통해서 이를 제어할 수 없고 네비게이터를 생성할 때 초기값을 설정해야 합니다.

현재 이 이슈는 Feature Request 로 등록된 상태이지만 구조적 문제인지 단시간에 해결될 것으로 보이진 않습니다.

해결책은 무엇인가?

이런 해결책을 내 놓고 있지만 많이 추천하는 방법은 SplashScreen을 하나 두고 로그인 상태에 따라서 screen을 변경하는 것입니다. 이와 관련된 구현 방법은 여기를 참고하시면 될 것 같습니다.

Deep Linking in nested navigators

무엇이 문제인가?

외부에서 링크를 통해서 앱을 실행했을 때 적절한 화면으로 전환하는 이른바 deep linking도 중요한 기능중에 하나인데 react-navigation에서 이 기능을 제공하고는 있지만 네비게이터가가 2 레벨 이상 중첩된 상태에서 deep linking을 하면 에러가 발생합니다.(관련이슈)

예를 들면, myapp://auth/main/profile 와 같이 2 레벨 이상으로 네비게이터가 중첩되어 있고 path 정보로 외부 링크로 앱을 실행하면 에러가 발생합니다.

해결책은 무엇인가?

지금까지는 딱히 방법을 찾지 못했습니다. 중첩 레벨을 2 이하로 줄여야 하는데 이건 현재 개발 중인 앱 구조에서는 불가능 하기에 해당 path를 파싱해서 수동으로 처리해야 합니다. (좋은 방법이 있으시면 댓글 남겨주세요 ㅠ_ㅠ)

Broken headerStyle override

무엇이 문제인가?

상위 navigator에서 공통 헤더 스타일을 적용하고, 중첩된 네비게이터에서 별도의 headerStyle를 수정하려고 하면 적용되지 않습니다.(관련이슈)

해결책은 무엇인가?

적절한 해결 방법은 찾지 못했고, 중첩된 네비게이터에서 별도로 headerStyle를 각각 적용하는 것으로 문제를 덮었습니다.(애도…)

Right-to-Left Transition on Android

무엇이 문제인가?

react-navigation에서는 iOS/안드로이드의 기본 transition 방향이 다릅니다. 아마도 플랫폼 UX에 맞게 제작된 것으로 보입니다. 즉, iOS에서는 Right-to-Left, 안드로이드에서는 Bottom-to-Top을 기본으로 합니다. 그런데 iOS에서와 같이 안드로이드에서도 같은 화면 전환 방향을 가지고 싶은 경우 별도의 옵션이 제공되지 않고 있습니다. (관련이슈)

해결책은 무엇인가?

안드로이드에서도 iOS와 같은 horizontal transition을 하고 싶다면 소스에서 별도로 interpolator를 import해서 transitionConfig를 설정해 주어야 합니다.

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';...const routeConfigs = {
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
};
const navigatorConfig = {
initialRouteName: 'Home',
transitionConfig: () => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal }),
};
const AppNavigator = StackNavigator(routeConfigs,navigatorConfig);

One transition one navigator

무엇이 문제인가?

react-natvigation은 네비게이터가 스크린을 포함하고 있는데 하나의 네비게이터는 스크린 간 전환 시에 한 가지 transition만 사용할 수 있습니다. 즉, StackNavigator안에 A, B, C 라는 스크린들이 있다고 할 때 A > B일 때는 Right-to-Left를 사용하고 B > C일 때는 Bottom-to-Top을 사용하는 것이 불가능하며 같은 레벨에서는 설정된 한 가지만 transition만 설정 가능합니다. (관련이슈)

해결책은 무엇인가?

위에서 언급한 경우에는 두 가지를 분리하여 별도의 StackNavigator로 구성해야 합니다. 사실 이런 부분으로 인해 중첩된 네비게이터가 많아질 수 밖에 없는 구조가 됩니다.

Reset navigation stack without animation

무엇이 문제인가?

탭을 사용하는 앱에서는 각 탭 안에서 화면이 쌓이는 경우가 있습니다. 그런데 쌓인 탭 화면을 한 번에 Reset하는 방법으로 현재 탭바에 있는 버튼을 누르는 것이지요. 이 때 별도의 애니메이션이 없이 해당 탭의 초기 화면으로 전환됩니다.

이러한 구조를 react-navigation으로 만들어 보면 다음과 같습니다.

TabNavigator --- StackNavigatorA --- ScreenA1
| |
| - ScreenA2
|
- StackNavigatorB --- ScreenB1
|
- ScreenB2

만약 TabA에서 A1 > A2 > A3 로 간 뒤에 바로 A1으로 Reset을 하고 싶은 경우 현재 탭에 다시 눌렸는지 체크하는 부분도 없거니와 Reset을 하더라도 goBack을 두 번하는 효과가 발생합니다.(관련이슈)

해결책은 무엇인가?

안타깝게도 현재 이 기능은 제공되지 않으며 현재 해결책에 대한 이슈가 올라와 있긴 하지만 특별한 진행상항은 없습니다. (관련이슈)

마치며…

네비게이션은 중요한 기능 중 하나입니다. 그런데 아직까지 100% 신뢰할만한 라이브러리가 없는 건 좀 안타깝지만…사실입니다.

네비게이션을 적용하는데 있어서 중요한 부분은 현재 자신이 개발하려는 앱과 찾고자하는 네이게이션 라이브러리가 맞는지에 대해서 고민하는 것입니다. react-navigation은 분명 좋은 시도이고 개인적인 바램으로는 네비게이션 라이브러리에서 메인스트림이 되길 기대합니다. 그러나 위에 언급한 이슈들이 여러분의 앱이 필요한 기능을 개발하는데 크리티컬한 부분이라면 다른 대안을 찾아보는 것이 더 나은 선택이 될 수도 있습니다(스트레스도 덜 하겠지요).

마지막으로 React Amsterdam 2017 talk 비디오 중에서 앱 개발과정 안에서 네이게이션 라이브러리들을 비교하고 어떤 것을 선택했는지에 대한 비디오 링크를 공유 드립니다.

Hun Kyo Jung

Written by

Front-end Developer. JavaScript lover. Dad of a lovely son, Crazy for Pizza and burger. React, React-Native, Codes everywhere. Works @radishfiction

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade