👉 React Navigation를 사용하면서 정리한 내용입니다!

NavigationContainer

NavigationContainer는 navigation을 위해 최상위에 렌데링되어야 한다.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}

Ref

props로 ref를 전달하여 navigation 관련 action들을 수행할 수 있다.

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';

function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={() => navigationRef.navigate('Home')}>
        Go home
      </Button>
      <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
    </View>
  );
}

Methods on the ref

// Example
navigationRef.navigate(name, params);

• navigationRef의 method 더 알아보기
• common navigation methods

• NavigationContainer의 Props 알아보기

Stack Navigator

새 화면이 navigation stack 맨 위에 위치하여 화면 간의 전환을 제공하는 navigator이다.

Example

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from '@react-navigation/stack';
import { RootStackParamList } from "./src/types";
import HomeScreen from "./src/screens/HomeScreen";
import MovieScreen from "./src/screens/MovieScreen";

const RootStack = createStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
        <RootStack.Navigator initialRouteName="Home">
          <RootStack.Screen
            name="Home"
            component={HomeScreen}
            options={{ headerShown: false }}
          />
          <RootStack.Screen
            name="Movie"
            component={MovieScreen}
            options={{ headerShown: false }}
          />
        </RootStack.Navigator>
      </NavigationContainer>
  );
}

export type RootStackParamList = {
  Home: undefined;
  Movie: {
    id: number;
    title: string;
    overview: string;
    voteCount: number;
  };
};

with Typescript

타입스크립트를 사용하고 있다면 먼저, route의 이름과 parameter 타입을 정의해야 한다.

export type RootStackParamList = {
  [name]: params;
};

• 위 예시에서는 Home과 Movie 이름을 가진 route가 있고, Home route에는 parameter가 없고, Movie route에는 id, title 등의 parameter가 있다.
• RootStackParamList 타입을 createStackNavigator 함수에게 전달해야 한다.

StackScreenProps

Stack의 Screen으로 렌더링되는 컴포넌트는 자동으로 navigation props와 route props를 주입받는다.

// src/screens/HomeScreen.tsx

import { StackScreenProps } from "@react-navigation/stack";
import { RootStackParamList } from "../types";

export type HomeScreenProps = StackScreenProps<RootStackParamList, "Home">;

export default function HomeScreen({ navigation, route } : HomeScreenProps){
  return (
    //...
  );
}

// src/screens/MovieScreen.tsx

import { StackScreenProps } from "@react-navigation/stack";
import { RootStackParamList } from "../types";

export type MovieScreenProps = StackScreenProps<RootStackParamList, "Movie">;

export default function MovieScreen({ navigation, route } : MovieScreenProps){
  const { id, title, overview, voteCount } = route.params;
  return (
    //...
  );
}

• route에는 앞서 RootStackParamList에서 정의한 params 객체가 있다.
• navigation은 navigation action을 실행할 수 있는 함수를 포함하고 있다.

navigation.goBack();
navigation.navigate("Home");
navigation.navigate("Movie", {
  id: movie.id,
  title: movie.original_title,
  overview: movie.overview,
  voteCount: movie.vote_count,
}); // MovieScreen으로 전환할 때 앞서 정의한 타입에 맞는 parameter 객체를 보내야 한다!!

• Route prop reference
• Navigation prop reference

Hook

• Screen 레벨의 컴포넌트가 아닌 하위 컴포넌트에서 navigation와 route를 사용하고 싶을 때 useNavigation과 useRoute를 이용하면 된다.
• props로 전달하지 않아도 되기 때문에 편리하다.
• 만약 타입스크립트를 사용한다면 Screen 컴포넌트의 props 타입이 필요하다.

const route = useRoute<MovieScreenProps["route"]>();
const navigation = useNavigation<MovieScreenProps["navigation"]();

이 밖에도 useScrollToTop, useIsFocused 등 다양하고 유용한 hook들을 제공한다.

BUG

공식문서대로 Stack Navigator를 제공했는데도 아래와 같은 에러가 발생했다.

⚠️ 'RootStack.Navigator' cannot be used as a JSX component

Stack overflow에서 방법을 찾았는데 @types/react의 버전 문제였다. 버전을 업데이트하여 문제를 해결하였다.

- "@types/react": "~17.0.21",
+ "@types/react": "18.0.0",

👉 React Navigation은 Stack Navigator뿐만 아니라 Bottom Tabs Navigator 등 총 6개의 Navigator를 제공한다.

👀 정리한 내용 이외에도 공식문서에는 Nesting Navigators, Navigator Lifecycle 등 다양한 내용들을 친절하게 설명하고 있다. Typescript를 같이 사용하는 개발자들을 위해 Type checking with TypeScript에 대한 내용도 함께 설명하고 있다. 사용자에게 다양한 화면을 보여주기 위해서는 navigation은 거의 필수 요소이다. 그래서 navigation 관련 api를 제공하지 않는 React Native 앱을 개발하는 데 있어서는 매우 유용하고 고마운 라이브러리이다. 💖