[RN] React Native 네비게이션

 

 

Navigation이란?

네비게이션이란 여러 화면 간 이동할 수 있도록 하는 것을 의미하는데

웹 브라우저에서 네비게이션은 URL을 입력해서 특정 페이지에 도달하고 <a> 링크를 사용해서 하위 페이지로 이동하는 개념이지만,

모바일 앱에선 버튼을 눌러서 한 화면에서 다른 화면으로 이동하거나 이전 화면으로 돌아가는 식이다.

 

프로젝트를 생성하고 아래 패키지 설치하기(Expo 기준)

npm install @react-navigation/native-stack
npm install @react-navigation/native

 

 

Navigator 설정

// App.js
import AppNavigation from "./src/navigation";

export default function App() {
  return <AppNavigation />;
}

 

// src/navigation/index.js
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import WelcomeScreen from "../screens/WelcomeScreen";
import HomeScreen from "../screens/HomeScreen";

const Stack = createNativeStackNavigator();

function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigation;

 

설치한 패키지에서 createNativeStackNavigator, NavigationContainer를 import하기

NavigationContainer 컴포넌트는 앱의 모든 네비게이터를 감싸야하기때문에 컴포넌트 최상위에 배치해야한다.

 

createNativeStackNavigator함수를 사용해서 Stack Navigator를 생성하는데

이를 통해 화면 간의 스택을 유지하고 새로운 화면을 추가하거나 이전 화면으로 돌아가는 동작을 쉽게 관리할 수 있다.

initialRouteName으로 어떤 화면이 먼저 표시되어야하는지 지정할 수 있고

Stack.Screen을 중첩해서 네비게이터가 관리할 화면의 이름을 지정하고 컴포넌트와 연결한다.

 

 

페이지 이동하기

useNavigation 훅은 해당 컴포넌트에서 네비게이션 객체를 가져와서 사용할 수 있도록 도와주며, 페이지 이동을 쉽게 할 수 있다.

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

function MyComponent() {
  const navigation = useNavigation();
  
  const goToHomeScreen = () => {
    navigation.navigate("Home");
  };
  
  const goToDetailScreen = () => {
    navigation.navigate("Detail", { key: "value" });
  };
  ...
}

 

navigation.navigate("컴포넌트 명")으로 이동시킬 수 있다.

또한, 다른화면으로 이동할 때 navigate 함수의 두번째 매개변수로 객체를 전달해서 데이터를 넘길 수도 있다.

navigation.navigate("컴포넌트 명", {key: "value"})

const {key} = route.params;

여기서 key는 전달된 데이터의 키로 이 키를 사용해서 값을 추출할 수 있다.

 

페이지 뒤로가기

onPress={() => navigation.goBack()}

 

goBack()은 현재 화면을 닫고 이전 화면으로 돌아가기