네비게이션과 화면 전환 React Navigation 설치부터 화면 이동까지 - React Native #5

이번에는 React Native에서 화면 간 전환을 효과적으로 구현하는 방법에 살펴봅니다. React Navigation을 활용한 내비게이션 구현 방법을 정리하고, Stack Navigator와 Tab Navigator 설정 및 활용 방법에 대해 살펴보겠습니다.

네비게이션과 화면 전환

 

 

내비게이션과 화면 전환

  React Navigation

React Navigation은 React Native에서 화면 간 이동을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. React Navigation을 사용하면 Stack Navigation, Tab Navigation, Drawer Navigation 등 다양한 방식으로 화면을 전환할 수 있습니다.

 

React Navigation의 주요 내비게이션 방식

Stack Navigator: 화면이 스택(Stack)처럼 쌓이면서 이동하는 방식 (예: 로그인 후 메인 화면으로 이동)

Tab Navigator: 화면 하단이나 상단에 탭(Tab) 버튼을 두고, 이를 눌러 화면을 이동하는 방식 (예: 인스타그램 하단 탭)

Drawer Navigator: 좌우에서 슬라이드로 열리는 메뉴를 통해 화면을 전환하는 방식 (예: 햄버거 메뉴)

각 방식은 특정한 사용 사례에 맞게 활용됩니다. 이 학습서에서는 가장 자주 사용되는 Stack Navigator와 Tab Navigator를 중심으로 다룰 것입니다.

 

반응형

 

  React Navigation 설치 및 설정

React Navigation을 사용하기 위해 먼저 라이브러리를 설치해야 합니다.

아래 명령어를 실행하여 React Navigation을 설치합니다.

npm install @react-navigation/native

 

React Navigation을 사용하려면 추가적으로 몇 가지 종속성을 설치해야 합니다.

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

 

마지막으로, 네비게이션 기능을 제공하는 내비게이터(Navigator) 패키지를 설치해야 합니다.

npm install @react-navigation/stack @react-navigation/bottom-tabs

 

설치가 완료되면 앱을 다시 실행하여 변경 사항을 반영합니다.

npx react-native run-android  # 안드로이드 실행
npx react-native run-ios      # iOS 실행

 

 

 

  Stack Navigator

Stack Navigator는 화면을 쌓는(stack) 방식으로 관리하는 내비게이션 방법입니다.

스택(Stack) 구조는 뒤로 가기(Back) 버튼을 통해 이전 화면으로 돌아갈 수 있도록 도와줍니다. 예를 들어, A 화면에서 B 화면으로 이동하면 B 화면이 A 화면 위에 쌓이며, 사용자가 뒤로 가기를 누르면 B 화면이 사라지고 A 화면이 다시 보이게 됩니다.

 

Stack Navigator 기본 사용법

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

이제 `HomeScreen.js`와 `DetailsScreen.js` 파일을 각각 생성해야 합니다.

 

 

  Tab Navigator

Tab Navigator는 하단 또는 상단에 탭 버튼(Tab)을 배치하여 화면을 전환하는 방식입니다.

 

Tab Navigator 설정

아래 코드를 작성하면 하단 탭을 이용해 두 개의 화면을 전환할 수 있습니다.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

이제 `HomeScreen.js`와 `SettingsScreen.js` 파일을 만들어 실행하면 내비게이션이 정상적으로 동작하는 것을 확인할 수 있습니다.