본문 영역

Develop/React Native2017. 7. 2. 13:58

리액트 네이티브의 시드를 만들면서 가장 고민이 되는 부분이 라우터 모듈을 선택하는 부분이었다.


리액트 네이티브 앱도 기본적으로 spa로 동작하게 된다.

spa에서는 페이지 전환이 일어날 때마다 서버로 페이지를 요청하는 대신 클라이언트 사이드에서 페이지를 바로 전환해준다.

이것을 가능하게 해주는 것이 클라이언트 사이드의 라우터 모듈이다.

보통 앵귤러나 리액트의 라우터 모듈들을 보면 브라우저의 url 변화를 인식하여 그 url에 해당하는 페이지를 동적으로 변화시켜준다.


그러나 리액트 네이티브 앱은 url로 라우팅하지 않는다.

(딥링킹을 통해서 특정 페이지의 url을 지정하여 외부 웹브라우저 등에서 myRnApp://login 로 접근할 수 있도록 할 수 있지만 기본적으로는 url이 존재하지 않는다.)

리액트 네이티브 앱에서는 특정 페이지에 키를 부여하여 라우팅한다.


1. 페이지 라우팅

react-navigation와 react-native-router-flux의 두 경우 키를 가지고 어떻게 라우팅하는지 살펴보자.


1
2
this.props.navigation.navigate('Login');
 
cs

(react-navigation)


1
2
3
4
import { Actions } from 'react-native-router-flux';
 
Actions.login();
 
cs

(react-native-router-flux)


react-navigation은 Login이 키가 되고 react-native-router-flux는 login이라는 키를 사용하여 페이지 이동을 한다.

페이지를 이동하는 코드만 봐도 두 라우터 모듈은 극명하게 갈린다.

react-navigation은 컴포넌트의 프로퍼티로 navigation 객체가 전달되고 navigation에 있는 navigate 함수를 통해서 이동한다.(non-flux)

반면 react-native-router-flux는 Actions를 임포트하여 Actions 객체에 있는 login 함수(액션 트리거)를 통해서 이동한다.(flux)


non-flux는 navigation 객체를 받은 해당 컴포넌트에서만 사용할 수 있고 flux는 어디서든 Actions를 임포트하여 사용할 수 있다는 특징이 있다.

여기까지만 보면 react-native-router-flux를 사용하지 않을 이유가 없다.


2. 페이지 전환 효과

페이지가 전환될 때마다 전환효과를 줄 수 있는데 react-navigation은 안드로이드에서는 아래에서 위로 올라오는 전환효과를 가지고 있고 ios에서는 오른쪽에서 왼쪽으로 오버랩되는 전환효과를 가지는게 디폴트로 되어 있다.

react-navigation에서의 전환효과는 안드로이드와 ios가 각각 다른 것이다.

이런 전환효과를 원치 않을 때는 이것은 굉장히 성가시게 된다.

react-navigation에서는 페이지별 전환효과를 주기가 까다롭게 되어 있기 때문에 더욱 그렇다.


반면 react-native-router-flux는 안드로이드와 ios의 전환효과가 같고 페이지별로 전환효과를 주기가 굉장히 편하다.


여기에서도 여전히 react-native-router-flux의 승이다.


3. 버그들

react-native-router-flux를 쓸 때 약간의 버그가 있었다.

스냅샷 테스트를 진행할 때 flux 패턴을 사용하면 알 수 없는 에러가 발생했다.

하지만 엑스포 sdk 18.0.0으로 버전 업되면서 이부분이 해결된 듯 하다.


react-navigation은 리액트 네이티브에서 공식적으로 지원하는 모듈 답게 버그는 없는 듯하다.


4. 페이지로 모달 구현

모달은 모든 페이지에서 접근할 수 있게 만들어야 한다.

그렇게 하려면 라우팅되는 페이지로 모달을 만드는 것이 적절하다.

react-navigation은 라우팅될 수 있는 페이지 스코프가 한정되어 있기 때문에 페이지로 모달을 구현하기 어렵다.

react-native-router-flux은 라우팅 가능한 페이지의 스코프가 굉장히 넓기 때문에 모든 페이지에서 접근 가능한 라우트 페이지를 구현하기 쉽다.

그래서 react-native-router-flux는 모든 페이지에서 접근 가능한 모달 페이지를 만들기 쉽다.


5. react-native-drawer과의 통합

react-native-router-flux에서는 가장 많이 쓰는 drawer 메뉴 모듈인 react-native-drawer과의 통합을 지원한다.


6. 퍼포먼스

퍼포먼스에 대해서는 지금 당장은 결론을 내리기가 어렵다.


작성자

account_circle
알 수 없는 사용자

댓글 영역