React Native/Typescript 환경에서 react-navigation을 활용하여 라우팅하는방법

서론

대상독자

타입스크립트로 RN 개발 시, react-navigation을 활용하여 라우팅하고 싶은 개발자

학습목표

@react-navigation에는 bottom-tabs, stack(native-stack), 드로어(drawer) 이렇게 총 3가지 종류의 네비게이터가 존재합니다. 오늘은 react-navigation을 활용하여 바텀 탭과 스택 네비게이팅에 대해서 알아보도록 하겠습니다. 기본적으로 리액트의 네비게이팅을 위해 쓰이는 React Router와 유사한 구조인데요, 바로 살펴보겠습니다.

본론

모듈 설치하기

yarn add @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack

@react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack란 라이브러리를 각각 설치해줍니다. bottom-tabs은 앱의 바텀바를 구성할 때 쓰입니다. native-stack은 스택 네비게이터를 구성할 때 쓰입니다. native는 네비게이팅을 위한 공통 요소로 쓰입니다.

Navigation Container 만들기

가장 먼저, Navigation 컴포넌트들을 아래와 같이, NavigationContainer로 감싸줍니다.

import { NavigationContainer } from "@react-navigation/native";

export default function Navigation() {
  return (
    <NavigationContainer>
      <RootNavigator setToken={setToken} />
    </NavigationContainer>
  );
}

RootNavigator 구성하기

RootNavigator란 스택의 최상단 계층을 말합니다. 아래와 같이 스크린을 구성하는 요소들을 RootNavigator에 넣어줍니다. 스택 스크린에 component 안에 올바른 스크린 컴포넌트를 넣어주는 게 중요합니다. 순서도 중요한데, 위에 오는 순서대로 화면에서 보여지기 때문입니다. 참고로 타입스크립트를 사용 시에는 RootStack을 구성하는 스크린에 대한 타입을 미리 지정해서 제너릭으로 타입을 지정해야 합니다.

import { NavigatorScreenParams } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  SignIn: undefined;
  Modal: undefined;
  NotFound: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Root"
        component={BottomTabNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="NotFound"
        component={NotFoundScreen}
        options={{ title: "Oops!" }}
      />
      <Stack.Group screenOptions={{ presentation: "modal" }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

bottom-tabs 구성하기

그런 뒤, bottom-tabs를 만들어보도록 하겠습니다. 이 역시 타입 정보가 필요합니다. 저는 아래와 같이 메인, 생성, 마이페이지 이렇게 세가지로 구성했습니다. 각각을 아래와 같이 적어줍니다. 스크린 컴포넌트는 따로 추가해줘야 합니다.

export type BnbNavigator = {
  ["BottomMain"]: undefined;
  ["BottomCreateMain"]: undefined;
  ["BottomMypage"]: undefined;
};

const BottomTab = createBottomTabNavigator<BnbNavigator>();

function BottomTabNavigator() {
  return (
    <BottomTab.Navigator
      initialRouteName={"BottomMain"}
      backBehavior="order"
      screenOptions={{
        headerShown: false,
      }}
    >
      <BottomTab.Screen
        name={"BottomMain"}
        component={MainScreen}
      />
      <BottomTab.Screen
        name={"BottomCreateMain"}
        component={CreateScreen}
      />
      <BottomTab.Screen
        name={"BottomMypage"}
        component={MyPageScreen}
      />
    </BottomTab.Navigator>
  );
}

Main 스크린과 상세 페이지로의 이동

예시로 메인 스크린 컴포넌트만 살펴보도록 하겠습니다. 아래처럼 화면에 들어갈 정보를 적어줍니다. 스크린 간 화면을 이동할 때는 navigation의 navigate 메서드를 사용하시면 됩니다. 또한 터치했을 때 이동해야 되므로, TouchableWithoutFeedback의 onPress 시, 화면 이동되도록 아래와 같이 처리해줍니다.

import { Text, View, TouchableWithoutFeedback } from "react-native";

const MainScreen = ({
  navigation,
}: RootTabScreenProps<typeof MAIN_SCREEN_NAME.HOME>) => {
  return (
    <View>
      <Text>메인스크린입니다.</Text>
      <TouchableWithoutFeedback onPress={() => navigation.navigate("BottomCreateMain"}>
          <Text>생성 페이지로 이동</Text>
      </TouchableWithoutFeedback>
    </View>
  );
};

export default MainScreen;

마무리

이상으로 간단하게 RN에서의 네비게이팅 방법에 관해서 알아보았습니다. 읽어주셔서 감사합니다!