React Navigation 중첩 라우팅 구현하기

React Navigation은 대표적인 React Native의 라우팅 라이브러리이다.

모바일 환경의 라우팅을 구현하다보면, 중첩으로 구성된 라우팅이 필요한 경우가 많다.

예를들어, 탭으로 구성된 앱이 있을 때 탭 내부에서 스택으로 라우팅이 필요한 경우가 있다.

많은 경우 탭 내부에서 상세 페이지가 필요한 경우가 있기에 이런 경우에는 탭 위에 스택이 쌓여있는 구조가 된다.

공식 문서를 참고하여 이를 구현하면 다음과 같다.

 

import React from 'react';
import {View, Text} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

const Tab = createTabNavigator();
const Stack = createStackNavigator();

const UsersList = () => (<View><Text>UsersList</Text></View>);
const UserInfo = () => (<View><Text>UserInfo</Text></View>);
const Settings = () => (<View><Text>Settings</Text></View>);

function UserStack(){
	return (
    	<Stack.Navigator>
        	<Stack.Screen name="UsersList" component={UsersList} />
        	<Stack.Screen name="UserInfo" component={UserInfo} />
        </Stack.Navigator>
    )
}

export default function App() {
	return (
    	<Tab.Navigator>
        	<Tab.Screen name="UserStack" component={UserStack} />
        	<Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    )
}

위와 같이 구현하면, tab 위에 스택이 올라간 구조를 만들 수 있다.

 

같은 컨셉의 라우팅을 구현하기 위한 또 다른 방법이 있다.

이 방법은 탭 위에 스택을 올리는 것이 아니라, 스택 위에 탭과 탭에서 이동할 컴포넌트를 구현하는 것이다.

이 경우 탭 내부의 컴포넌트에서 바깥 스택의 컴포넌트로 navigate하게 되는데, 위의 방법과는 다른 점으로 스택이 외부에 있고, 라우팅한 컴포넌트가 탭과는 관계가 없기에 하단의 탭바가 없다는 점이다.

즉, 위에 코드에서 보면 UserInfo가 바깥으로 빠져나와 UserInfo에 접근했을 때 하단의 탭바가 보이지 않게 된다.

구현을 하자면, 다음과 같다.

 

import React from 'react';
import {View, Text} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

const Tab = createTabNavigator();
const Stack = createStackNavigator();

const UsersList = () => (<View><Text>UsersList</Text></View>);
const UserInfo = () => (<View><Text>UserInfo</Text></View>);
const Settings = () => (<View><Text>Settings</Text></View>);

function HomeTab(){
	return (
    	<Tab.Navigator>
        	<Tab.Screen name="UsersList" component={UsersList} />
        	<Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
    )
}

export default function App() {
	return (
    	<Stack.Navigator>
        	<Stack.Screen name="HomeTab" component={HomeTab} />
        	<Stack.Screen name="UserInfo" component={UserInfo} />
        </Stack.Navigator>
    )
}

언뜻 보기에는 탭 내부에 있는 UsersList에서 바깥 스택에 있는 UserInfo에 접근이 불가능해 보이지만, 실제로 navigate를 해보면 잘 작동하는 것을 알 수 있다.

 

https://reactnavigation.org/docs/screen-options-resolution/

React Navigation