리액트 네이티브 네비게이션

리액트 네이티브 네비게이션 

스택 네비게이션의 개념은 자료구조의 스택처럼 하나씩 쌓아가는 개념입니다. 만약 모바일 앱에서 어떤 다른 페이지로 이동을 한다고 했을 때 그 페이지로 완전히 전환 되는 것이 아닌 그 페이지가 위에 쌓인다고 할 수 있습니다. 또 다른 페이지로 이동이 되면 쌓이고 뒤로가기 버튼을 통해 쌓인 스택을 하나 벗겨낼 수 있습니다.

일단 스택 네비게이션의 사용을 위해 몇가지 라이브러리를 설치합니다.

yarn add @react-navigation/stack @react-navigation/nativeexpo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

그 후 프로젝트 폴더에 src라는 디렉토리를 만들고 안에 Routes.tsx라는 파일을 만들어주고 아래와 같이 작성합니다.

################################################################################

import React from 'react';
import { View, Text} from 'react-native';
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";const Stack = createStackNavigator()const Center: React.FC = ({ children }) => { 

//컴포넌트를 가운데 정렬해줍니다.
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            {children}
        </View>
    )
}const Routes: React.FC = () => {
    return (<NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="About" component={About} />
                </Stack.Navigator>
     
        </NavigationContainer>
    );
}export default Routes;import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";const Stack = createStackNavigator()

createStackNavigator를 통해 스택 네비게이션을 선언해주고 NavigationContainer안에 담습니다. 그리고 그 안에 Stack.Screen을 통해 컴포넌트를 하나하나 라우팅 해줍니다.

function Home(){
    return(
      <View>
        <Text>        Home   
   </Text>     </View>
)}function About(){
    return(
      <View>
        <Text>          About
   </Text></View>
)}

################################################################################

라우팅할 컴포넌트도 만들어주고

그리고 App.tsx에는

import {Routes} from "./src/Routes"
export default Routes; 를 통해 라우팅정보를 메인으로 보냅니다.

이렇게 하면 Home과 About이 따로따로 라우팅이 됩니다.

최초 네비게이팅과 라우트 이동물론 정상적으로 실행은 안됩니다. 왜냐하면 앱을 켰을 때 어떤 라우트를 띄울지 리액트 네이티브가 모르기 때문입니다.

################################################################################

<NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="About" component={About} />
                </Stack.Navigator>
     
        </NavigationContainer>

################################################################################

위 처럼 initialRouteName 옵션을 주면 앱이 실행되었을 때 어떤 스택 라우트를 실행할지 알 수 있게 됩니다. 이외에도 screenOptions를 통해 모든 라우팅에 다른 옵션을 줄 수 있고 Stack.screen에도 options를 통해 설정을 더 추가해줄 수 있습니다. 일반적으로 옵션 오브젝트는 함수로 작성이 됩니다.

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

그리고 Home 컴포넌트에서

function Home({navigation, route})

navigation props를 가져옵니다. navigation은 네비게이터를 통해 지정된 컴포넌트라면 기본적으로 가지게 됩니다. 마치 react-router-dom의 history, location처럼 말이죠.

route는 route.name 또는 route.key를 통해 라우트의 정보를 알 수 있게 도와줍니다.

<Button title="go to about" onPress={()=>{navigation.navigate('About')
}}

그리고 navigation을 통해 Home 컴포넌트에 라우팅을 할 수 있는 버튼을 지정해줍니다 navigate 메소드의 파라미터로는 Stack.Screen의 name 애트리뷰트 값을 주면 됩니다.

버튼을 누르면 About page로 이동이 되고 에뮬레이터 상단에 뒤로가기 표시가 나오는 것을 확인 할 수 있습니다.

타입 세이프 네비게이팅 이제 타입스크립트를 적용해봅시다. 만약 타입스크립트에 익숙치 않은 사람이라면 그냥 넘어가고 위 코드를 전부 자바스크립트로 작성해도 좋습니다.(단 tsx => jsx)

################################################################################

import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
// 위 두개는 라우티드 컴포넌트 props인 navigation과 route의 타입입니다.
export type AuthParamList = {
    Home: undefined
    About: undefined
}export type AuthNavProps<T extends keyof AuthParamList> = {
    navigation: StackNavigationProp<AuthParamList, T>
    route: RouteProp<AuthParamList, T>
}

AuthParamList.ts라는 이름으로 위와 같은 파일을 작성해줍니다. 이렇게하면 Home과 About 라우트가 각각 타입지정이 됩니다.

function Home({ navigation, route }: AuthNavProps<'Home'>) {
    return (
        <Center>
            <Text>Home Screen</Text>
            <Button title="go to about" onPress={() => {
                navigation.navigate('About')
            }} />
        </Center>
    )
}

################################################################################

Home컴포넌트에 위와 같이 제네릭을 통해 타입선언을 해주고

Routes 컴포넌트에서

<NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="About" component={About} />
                </Stack.Navigator>
     
        </NavigationContainer>

이 부분에서 name에 “Home” 부분에 일부러 오타를 내봅니다. 그러면 위 AuthParamList에서 타입 지정을 해놓았기 때문에 오류가 나옵니다.

그리고 navigation을 사용하기 위해 navigation. 까지 입력을 하면

import { StackNavigationProp } from '@react-navigation/stack';

여기서 가져왔던 타입이 navigation의 메소드들을 전부 알려줍니다.