안녕하세요! 오늘은 React Native 앱 개발에 필수적인 내비게이션에 대해 알아보려고 합니다. 이 글은 https://blog.logrocket.com/react-native-navigation-tutorial/ 의 내용을 바탕으로 작성되었습니다.변역과정에서 다르게 해석되거나 저작권에 문제가 될 수 있는 부분이 있다면 언제든 알려주시기 바랍니다. 그럼 React Native에서 React Navigation 라이브러리를 사용하여 다양한 내비게이션 패턴을 구현하는 방법에 대해 함께 알아보겠습니다!
React Native에서의 내비게이션 기초와 React Navigation 라이브러리 사용법에 대해 알아보겠습니다.
모바일 앱은 여러 화면으로 구성됩니다. 모바일 앱을 개발할 때 주요 관심사 중 하나는 사용자가 앱 내에서 화면 간 이동하는 내비게이션을 처리하는 것입니다. 여기에는 화면의 표시와 화면 전환 효과 등이 포함됩니다.
React Navigation은 React Native에서 가장 잘 알려진 내비게이션 라이브러리 중 하나입니다. 이 튜토리얼에서는 React Native에서의 내비게이션 기초를 살펴보고, React Navigation을 시작하는 방법을 다룰 것입니다. 그리고 React Native 내비게이션 예제를 통해 실제 사용 방법을 알아보겠습니다.
React Navigation을 사용하면 Stack, Tab, Drawer 등 다양한 내비게이션 스타일을 쉽게 구현할 수 있습니다. 또한 내비게이션 상태 관리, 심층 링크(Deep Link) 처리, 화면 전환 애니메이션 등 다양한 기능을 제공합니다.
이 글을 통해 React Native에서 내비게이션을 구현하는 방법과 React Navigation 라이브러리의 활용법을 배울 수 있을 것입니다. 예제와 함께 단계별로 설명할 예정이니 React Native 개발자라면 꼭 따라 해보시기 바랍니다.
React Navigation이란?
React Navigation은 React 애플리케이션에서 내비게이션 기능을 구현할 수 있게 해주는 독립적인 라이브러리입니다.
React Navigation은 JavaScript로 작성되었으며, iOS와 Android의 네이티브 내비게이션 API를 직접 사용하지 않습니다. 대신에 그러한 API의 일부를 재구성합니다. 이를 통해 서드파티 JS 플러그인의 통합, 최대한의 사용자 정의, 그리고 더 쉬운 디버깅이 가능하며, Objective-C, Swift, Java, Kotlin 등을 배울 필요가 없습니다.
React Native Navigation이란?
React Native Navigation은 React Navigation의 유명한 대안입니다. 이는 React Native와 함께 사용되도록 설계된 종속적인 모듈입니다. React Native Navigation은 iOS와 Android에서 네이티브 내비게이션 API를 직접 사용하여 더 네이티브한 모습과 느낌을 제공한다는 점에서 약간 다릅니다. 작성 시점에서 React Native Navigation의 현재 안정 버전은 React Navigation 6.1입니다.
React Navigation과 React Native Navigation의 차이점에 대한 더 자세한 탐구는 “React Navigation vs. React Native Navigation: Which is right for you?”를 참고하세요.
대안: React Router Native
React Router Native는 React Native 앱에서 내비게이션 기능을 구현하기 위한 또 다른 솔루션입니다. 이는 Remix 팀에 의해 개발되었습니다.
React Router Native는 대부분의 API 코드를 React Router 프레임워크와 공유합니다. 이는 React Router로 작업한 경험이 있는 웹 개발자가 Native 버전을 쉽게 사용할 수 있음을 의미합니다.
사용 용이성 측면에서 React Navigation과 React Router Native는 동일합니다. 예를 들어, 다음 Router Native 코드를 보세요:
import { NativeRouter, Route, Link } from "react-router-native";
const Home = () => <Text>Home</Text>;
const About = () => <Text>About</Text>;
const App = () => (
<NativeRouter>
<View>
<View>
{/* 링크를 정의합니다. a 태그와 유사합니다. */}
<Link to="/">
<Text>Home</Text>
</Link>
<Link to="/about">
<Text>About</Text>
</Link>
</View>
{/* 프로젝트의 라우트를 정의합니다. */}
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</View>
{/* NativeRouter 컴포넌트 */}
</NativeRouter>
);Navigation과 비교했을 때, 코드가 유사한 것을 볼 수 있습니다:
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
function HomeScreen() {
return (
<View>
<Text>Home Screen</Text>
</View>
);
}
function AboutScreen() {
return (
<View>
<Text>About Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
{/* 라우트 정의 */}
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="About" component={AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}두 라이브러리에서 라우팅을 구현하는 데 사용되는 코드는 서로 동일합니다. 이는 두 프레임워크 모두 학습 곡선이 작다는 것을 의미하므로 큰 장점입니다.
웹 개발 배경이 있다면 React Router Native를 추천합니다. 사용법이 React Router와 동일하기 때문입니다. 그렇지 않다면 React Navigation이 더 큰 커뮤니티를 가지고 있어 개발 지원이 더 많으므로 선택하는 것이 좋습니다.
React Navigation 설치하기
React Navigation이 무엇인지, 그리고 React Router Native와 어떤 관련이 있는지 살펴보았으니, 이제 앱에서 어떻게 사용할 수 있는지 알아보겠습니다.
주의: 이 글에서는 React Native 애플리케이션에 Expo를 사용할 것입니다.
먼저, 아래 명령어로 새 애플리케이션을 생성합니다:
npx create-expo-app ReactNavigationDemo이렇게 하면 ReactNavigationDemo라는 새 프로젝트가 생성됩니다.
다음으로, 프로젝트 폴더로 cd로 이동하고 코드 에디터를 엽니다:
cd ReactNavigationDemoVS Code를 사용한다면, 다음 명령어로 현재 폴더를 에디터에서 열 수 있습니다:
code .다음 명령어로 앱을 시작합니다:
npx expo start그 다음, 아래 명령어 중 하나를 사용하여 React Native 프로젝트에 React Navigation 라이브러리를 설치합니다:
/* npm */
npm install @react-navigation/native
/* yarn */
yarn add @react-navigation/nativereact-native-screens와 react-native-safe-area-context와 같은 종속성도 설치해야 합니다:
npx expo install react-native-screens react-native-safe-area-context주목할 점은 우리가 npm이나 yarn을 사용하여 이러한 종속성을 설치하지 않았다는 것입니다. 대신 npx expo install을 사용했는데, 이는 프로젝트 패키지와 호환되는 종속성 버전을 설치하기 때문입니다.
npm과 yarn은 항상 최신 버전을 설치하므로 프로젝트와 호환되지 않을 수 있습니다. 단점은 프로덕션 수준의 오류가 발생할 수 있다는 것입니다. 따라서 종속성 패키지를 설치할 때는 항상 이 명령어를 사용하는 것이 좋습니다.
React Native Stack Navigator
React Navigation은 JavaScript로 구축되어 있으며, 실제 네이티브처럼 보이고 느껴지는 컴포넌트와 내비게이션 패턴을 만들 수 있게 해줍니다.
React Navigation은 스택 기반 내비게이션 모델을 제공하여 내비게이션 스택에 화면을 푸시하고 팝할 수 있습니다. 스택 내비게이션을 사용하면 Stack Navigator를 사용하여 애플리케이션의 내비게이션 구조를 정의할 수 있습니다. Stack Navigator는 화면 스택을 유지 관리합니다. 주어진 시간에 사용자에게 하나의 화면만 표시되며, 각 화면은 스택에 푸시될 때 표시됩니다. 즉, 사용자가 화면으로 이동하면 해당 화면이 스택의 맨 위로 푸시됩니다.
종이 더미를 상상해 보세요. 새로운 화면으로 이동하면 그 화면이 더미의 맨 위에 놓이고, 뒤로 이동하면 그 화면이 더미에서 제거됩니다. Stack Navigator는 또한 iOS와 Android 네이티브처럼 느껴지는 전환과 제스처를 제공합니다.
앱에는 여러 개의 Stack Navigator가 있을 수 있다는 점에 유의하세요.
Stack Navigator vs. Native Stack Navigator 이해하기
React Native에는 두 가지 스택 내비게이션 라이브러리가 있습니다: @react-navigation/stack과 @react-navigation/native-stack. 이 두 라이브러리는 모두 스택 기반 내비게이션 모델을 제공하고 화면 간 전환을 용이하게 하며, 각각의 새로운 화면을 스택의 맨 위에 놓습니다.
그러나 기본적으로 @react-navigation/stack은 사용자 정의 가능한 애니메이션과 함께 익숙한 iOS 및 Android 모양과 느낌으로 구성되는 반면, @react-navigation/native-stack은 IOS의 UINavigationController와 Android의 Fragment와 같은 네이티브 API를 활용하여 네이티브로 구축된 앱과 동일하게 동작합니다.
두 라이브러리의 차이점을 이해하기 위해 다음과 같은 주요 요소들을 살펴보겠습니다:
- 사용자 정의:
@react-navigation/native-stack은 필요에 따라@react-navigation/stack만큼 사용자 정의가 가능하지 않을 수 있습니다. 따라서 내비게이션 애니메이션을 원하는 대로 사용자 정의해야 한다면@react-navigation/stack을 사용해야 합니다. - 성능:
@react-navigation/native-stack은 더 나은 성능을 제공합니다.@react-navigation/stack과 비교했을 때, 화면을 렌더링하기 위해 네이티브 스택View컴포넌트를 사용하므로 전환 애니메이션이 더 빠르고 더 좋으며 더 부드럽습니다. - 호환성: 두 라이브러리 모두 React navigation과 호환됩니다.
@react-navigation/native-stack은react-native-web을 사용하여 웹에 대한 기본 지원도 제공합니다. 반면에@react-navigation/stack은 그렇지 않습니다. 또한react-native-gesture-handler를 설치하고 엔트리 또는 루트 파일(index.js또는App.js)의 맨 위에서 import해야 합니다. 개발 중에는 잘 작동하더라도 이를 건너뛰면 프로덕션 수준의 충돌이 발생할 수 있습니다. 또한 UIkit 스타일을 사용하여 헤더를 애니메이션화하려면 추가 패키지인@react-native-masked-view/masked-view를 설치해야 합니다.
React Native navigators
이 섹션에서는 React Native navigation의 다양한 내비게이터와 React Navigation 라이브러리를 사용하여 이를 구현하는 방법에 대해 알아보겠습니다.
1. Stack Navigator를 사용하여 화면 컴포넌트 간 이동하기
먼저 Homescreen과 Aboutscreen이라는 두 개의 파일을 생성하는 것부터 시작하겠습니다:
/* components/Homescreen.js */
import React from "react";
import { Button, View, Text } from "react-native";
export default function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => navigation.navigate("About")}
/>
</View>
);
}위 버튼의 onPress prop에 주목하세요. 이것이 무엇을 하는지는 나중에 설명하겠습니다:
/* components/Aboutscreen.js */
import React, { Component } from "react";
import { Button, View, Text } from "react-native";
export default function AboutScreen() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>About Screen</Text>
</View>
);
}프로젝트 폴더는 다음과 같아야 합니다:
이제 App.js에도 변경 사항을 적용해 보겠습니다. 여기서 다음과 같은 import를 해야 합니다:
//React에게 우리가 내비게이터를 구현할 것이라고 알립니다.
import { NavigationContainer } from "@react-navigation/native";
//스택 내비게이터를 생성합니다.
import { createNativeStackNavigator } from "@react-navigation/native-stack";루트 App.js 파일에서 내비게이션을 구현하는 것이 유용한데, 그 이유는 App.js에서 export된 컴포넌트가 React Native 앱의 진입점(또는 루트 컴포넌트)이고 다른 모든 컴포넌트는 그것의 자손이기 때문입니다.
보시다시피, 우리는 모든 다른 컴포넌트를 내비게이션 함수 안에 캡슐화할 것입니다:
/* App.js */
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="About"
component={AboutScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}위 코드에서 createNativeStackNavigator는 새로운 화면이 스택 맨 위에 놓이면서 화면 간 전환할 수 있는 방법을 제공합니다. 이는 익숙한 iOS 및 Android 모양과 느낌으로 구성됩니다: 새로운 화면은 iOS에서는 오른쪽에서 슬라이드되고 Android에서는 아래에서 페이드 인됩니다.
여기서 우리는 createNativeStackNavigator 함수를 실행하고 그 인스턴스를 Stack 변수에 저장했습니다. 나중에 Stack.Screen 태그를 사용하여 경로를 전달할 것입니다. Home 경로는 HomeScreen에 해당하고 About 경로는 AboutScreen에 해당합니다.
또한 Stack은 순서대로 표시됩니다. 즉, HomeScreen이 Stack의 맨 위에 있기 때문에 기본적으로 먼저 표시됩니다. 이 기본 옵션을 무시하려면 초기 경로를 지정할 수 있습니다. 아래 코드를 참조하세요:
/* App.js */
// imports....
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='About'>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="About"
component={AboutScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}내부적으로 createStackNavigator 함수는 HomeScreen과 AboutScreen 컴포넌트에 navigate prop을 제공합니다.
이 prop은 지정된 화면 컴포넌트로의 이동을 허용합니다. 이것이 우리가 HomeScreen.js의 버튼에서 이를 사용할 수 있는 이유입니다. 버튼을 누르면 아래와 같이 AboutScreen 페이지로 이동합니다:
<Button title="Go to About" onPress={() => navigation.navigate("About")} />;App.js 코드에서 마지막으로 컴포넌트를 NavigationContainer 컴포넌트 안에 래핑하여 앱 컨테이너를 생성했습니다. 이 컴포넌트는 내비게이션 트리를 관리하고 내비게이션 상태를 포함합니다.
마지막으로 애플리케이션을 실행합니다:
npx expo start애플리케이션은 다음과 같아야 합니다:
2. TabNavigator 사용하기
대부분의 모바일 앱은 둘 이상의 화면을 가지고 있습니다. 이런 모바일 앱에서 일반적인 내비게이션 스타일은 탭 기반 내비게이션입니다. React Navigation에는 이를 구현하는 데 도움이 되는 createBottomTabNavigator라는 컴포넌트가 있습니다.
탭 기반 내비게이션을 구현하기 전에 아래 명령어 중 하나를 사용하여 bottom-tabs 모듈을 설치하세요:
/* npm */
npm install @react-navigation/bottom-tabs
/* yarn */
yarn add @react-navigation/bottom-tabsContactScreen 파일을 생성하여 앱에 다른 화면을 추가해 보겠습니다:
/* components/ContactScreen.js */
import React, { Component } from "react";
import { Button, View, Text } from "react-native";
export default function ContactScreen() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Contact Screen</Text>
</View>
);
}다음으로 이를 App.js 파일로 가져옵니다:
import ContactScreen from './components/ContactScreen';우리는 또한 App.js 파일에서 탭 내비게이션을 구현할 것입니다. 그 이유는 모든 내비게이션 구성을 루트 파일에서 구현하는 것이 좋기 때문입니다. 이러한 구성은 모든 내비게이션 구조를 감싸고 화면을 자식으로 렌더링합니다.
createNativeStackNavigator 줄을 다음 코드 줄로 바꿉니다:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';우리의 Stack Navigator도 변경될 것입니다. App.js는 다음과 같아야 합니다:
/* App.js */
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ContactScreen from './components/ContactScreen';
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="About"
component={AboutScreen}
/>
<Tab.Screen
name="Contact"
component={ContactScreen}
/>
</Tab.Navigator>
</NavigationContainer>
);
}애플리케이션을 실행하면 다음과 같이 보일 것입니다:
탭 내비게이션을 사용하면 화면 하단에 탭 바가 표시되고, 탭을 눌러 해당 화면으로 쉽게 이동할 수 있습니다. 각 탭은 해당 화면의 이름과 아이콘으로 표시됩니다. 이렇게 하면 사용자가 앱 내에서 편리하게 탐색할 수 있습니다.
createBottomTabNavigator를 사용하여 탭 내비게이터를 생성하고, Tab.Screen 컴포넌트를 사용하여 각 탭에 해당하는 화면을 정의합니다. 이 때 name prop은 탭의 이름을, component prop은 해당 탭이 눌렸을 때 표시될 화면 컴포넌트를 지정합니다.
이렇게 React Navigation의 createBottomTabNavigator를 사용하면 모바일 앱에서 흔히 사용되는 탭 기반 내비게이션을 쉽게 구현할 수 있습니다.
3. Drawer Navigator 사용하기
Drawer Navigation을 사용하려면 먼저 아래 명령어 중 하나를 사용하여 @react-navigation/drawer 패키지를 설치해야 합니다:
/* npm */
npm install @react-navigation/drawer
/* yarn */
yarn add @react-navigation/drawer다음으로 npx expo install을 사용하여 종속성을 설치합니다:
npx expo install react-native-gesture-handler react-native-reanimated그 다음 Reanimated 문서로 이동하여 프로젝트에 제스처 컨트롤을 설정하세요. 이 단계 후에 App.js의 맨 위에서 제스처 핸들러 패키지를 가져옵니다:
import "react-native-gesture-handler"; //이것은 맨 위에 있어야 합니다.이제 Drawer Navigation으로 내비게이터를 업데이트해 보겠습니다. App.js 코드를 아래 코드로 복사하여 바꾸세요:
/* App.js */
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import ContactScreen from './components/ContactScreen';
import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen
name="Home"
component={HomeScreen}
/>
<Drawer.Screen
name="About"
component={AboutScreen}
/>
<Drawer.Screen
name="Contact"
component={ContactScreen}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}애플리케이션을 실행하여 결과를 확인하세요:
Drawer Navigation은 화면의 왼쪽 또는 오른쪽에서 슬라이드 인/아웃되는 서랍(Drawer) 형태의 메뉴를 통해 화면 간 이동을 할 수 있게 해줍니다. 사용자는 화면의 가장자리에서 스와이프하거나 메뉴 버튼을 눌러 Drawer를 열 수 있습니다.
createDrawerNavigator를 사용하여 Drawer 내비게이터를 생성하고, Drawer.Screen 컴포넌트를 사용하여 각 메뉴 항목에 해당하는 화면을 정의합니다. 각 화면의 이름은 name prop으로, 해당 화면의 컴포넌트는 component prop으로 지정합니다.
Drawer Navigation은 앱의 주요 섹션 간 이동에 적합한 내비게이션 패턴입니다. 사용자가 현재 화면을 벗어나지 않고도 앱의 다른 부분으로 쉽게 이동할 수 있습니다. 또한 Drawer는 사용자가 현재 위치를 파악하고 다른 화면으로 빠르게 이동할 수 있도록 도와줍니다.
이렇게 React Navigation의 createDrawerNavigator를 사용하면 모바일 앱에서 흔히 사용되는 Drawer 내비게이션을 쉽게 구현할 수 있습니다. 사용자에게 친숙한 내비게이션 경험을 제공하고 앱의 주요 섹션 간 이동을 용이하게 만들 수 있습니다.
Drawer Navigation을 사용자 정의하려면 경로 이름 옆에 아이콘을 추가할 수 있습니다. 아이콘은 assets 폴더 안에 위치합니다.
다음과 같이 각 화면 컴포넌트 파일에 navigationOptions를 추가하여 사용자 정의할 수 있습니다:
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{ //화면의 구성을 변경합니다.
drawerIcon: ({ color, number, focused }) => { //아이콘을 설정합니다:
return ( //아이콘은 이미지가 될 것입니다.
<Image
source={require("../assets/home-icon.png")}
style={{ height: 30, width: 30 }}
/>
);
},
}}
/>
<Drawer.Screen
name="About"
component={AboutScreen}
options={{
drawerIcon: ({ color, number, focused }) => { //모든 화면의 아이콘을 설정합니다.
return (
<Image
source={require("../assets/about-icon.png")}
style={{ height: 30, width: 30 }}
/>
);
},
}}
/>
<Drawer.Screen
name="Contact"
component={ContactScreen}
options={{
drawerIcon: ({ color, number, focused }) => {
return (
<Image
source={require("../assets/contact-icon.png")}
style={{ height: 30, width: 30 }}
/>
);
},
}}
/>
</Drawer.Navigator>
</NavigationContainer>drawerActiveTintColor prop을 사용하면 내비게이션 탭과 레이블의 활성 또는 비활성 상태에 따라 원하는 색상을 적용할 수 있습니다. 예를 들어, Drawer Navigation 레이블의 활성 상태 색상을 변경할 수 있습니다. Drawer.Navigator 변수로 가서 options 객체에 다음을 추가하세요:
<Drawer.Navigator
initialRouteName="Home"
screenOptions={{ drawerActiveTintColor: "#e91e63" }}
>
//... 추가 코드.이렇게 하면 색상이 변경됩니다:
4. useNavigation() Hook 사용하기
React Navigation은 useNavigation이라는 Hook도 제공합니다. 이 Hook은 함수형 컴포넌트에서 navigation 객체에 접근할 수 있게 해주고, 프로그래밍적으로 내비게이션 동작을 트리거할 수 있게 해줍니다. navigation prop을 컴포넌트에 직접 전달할 수 없을 때 유용합니다.
솔직히 말해서, 저는 이 Hook을 더 자주 사용합니다. 함수형 컴포넌트 내에서 더 쉽게 관리할 수 있고 사용하기도 매우 쉽기 때문입니다.
HomeScreen 파일에서 코드를 아래 코드로 바꾸세요:
/* components/HomeScreen.js */
import React from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
export default function HomeScreen() {
const navigation = useNavigation();
return (
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => navigation.navigate('About')}
/>
</View>
);
}useNavigation Hook은 @react-navigation/native 모듈에서 가져오며, 프로그래밍적 동작이 가능한 navigation 객체를 반환합니다.
About 페이지에서도 뒤로 가기 버튼에 동일한 방법을 적용할 수 있습니다. 다음 코드를 참조하세요:
/* components/About.js */
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
export default function AboutScreen() {
const navigation = useNavigation();
return (
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
>
<Text>About Screen</Text>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
</View>
);
}React Navigation에서 화면으로 매개변수 전달하기
화면으로 매개변수를 전달하는 두 가지 간단한 단계가 있습니다: 매개변수를 전달한 다음 자식 경로 또는 화면에서 매개변수를 읽습니다.
먼저, navigation.navigate 함수의 두 번째 매개변수로 객체에 매개변수를 넣어 경로로 전달합니다:
navigation.navigate('RouteName', { /* params go here */ })그런 다음 화면 컴포넌트에서 매개변수를 읽습니다. 매개변수는 route.params에서 찾을 수 있습니다:
export default function HomeScreen({ route, navigation }) {
//`route` 변수는 페이지에 대한 정보를 제공합니다.
//매개변수와 해당 값도 저장합니다.
const { paramName } = route.params; //`paramName` 매개변수가 여기에 저장됩니다.
//..추가 코드..
}마지막으로, 헤더 제목을 설정하려면 options prop의 title 속성을 다음과 같이 사용할 수 있습니다:
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
title: "Home Page", //페이지 제목을 'Home page'로 설정합니다.
}}
/>이렇게 React Navigation을 사용하면 화면 간 매개변수 전달, 헤더 제목 설정, useNavigation Hook을 통한 프로그래밍적 내비게이션 등 다양한 내비게이션 기능을 쉽게 구현할 수 있습니다. 이러한 기능들을 활용하여 사용자 친화적이고 직관적인 내비게이션 경험을 제공할 수 있습니다.
결론
이 글이 여러분의 기존 또는 향후 React Native 프로젝트에서 React Navigation 패키지를 사용하는 데 도움이 되기를 바랍니다.
React Navigation으로 할 수 있는 것은 훨씬 더 많으며, 대부분의 요구 사항을 충족시킬 수 있습니다. 더 자세한 내용을 알고 싶다면 React Navigation 문서를 참조하세요. 그리고 제 GitHub 저장소에서 최종 코드를 자유롭게 가져다 사용하셔도 됩니다.
React Navigation은 React Native 앱 개발에 있어 강력하고 유연한 내비게이션 솔루션입니다. Stack, Tab, Drawer 등 다양한 내비게이션 패턴을 쉽게 구현할 수 있으며, 화면 간 매개변수 전달, 사용자 정의 옵션, 프로그래밍적 내비게이션 등 다양한 기능을 제공합니다.
이 글에서 다룬 내용을 바탕으로 React Navigation의 기본 개념과 사용 방법을 이해하셨길 바랍니다. 앞으로 React Native 앱 개발에 React Navigation을 적극 활용하여 사용자 친화적이고 직관적인 내비게이션을 구현해 보시기 바랍니다.
더 자세한 내용과 고급 기능들은 React Navigation 공식 문서를 참조하시면 도움이 될 것입니다. 그리고 제가 제공한 GitHub 저장소의 예제 코드를 참고하여 실제 프로젝트에 적용해 보는 것도 좋은 방법입니다.
React Navigation의 세계를 탐험하며 멋진 앱을 만들어 보세요. 행운을 빕니다!