🧭 35. React Native Navigation 완전 정리 — Stack, Tab, Drawer 전부 이해하자

JM_Dev·2025년 5월 14일

Stack Navigation Tab Navigation drawer navigation react native react navigation 개발자기록 앱개발 프론트엔드

개발자가 되어가는 걸음

목록 보기

35/81

React Native 앱에서 화면 간 이동을 처리하려면
React Navigation이라는 라이브러리를 거의 표준처럼 사용하게 된다.

하지만 처음에 접하면 Stack, Tab, Drawer가 뭐가 다르고, 어떻게 중첩하는지
헷갈리는 경우가 많다.

이번 글에서는 react-navigation을 사용할 때
기본 구조, 화면 이동 방식, 중첩 구조까지 한 번에 정리해봤다.

React Native에서 화면 간 이동을 처리해주는 가장 널리 쓰이는 라이브러리

📦 설치 (필수 패키지 포함)

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

📦 원하는 navigator 추가

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

화면을 쌓아올리는 구조. 가장 기본

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

const Stack = createNativeStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

🔁 이동

navigation.navigate('Detail');     // 스크린 이동
navigation.goBack();              // 이전 스크린으로

✅ 네이티브 앱의 기본 동작과 동일
✅ Android: 뒤로가기 버튼 자동 연결

하단 탭 네비게이션 (SNS 앱에서 자주 보이는 형태)

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

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

✅ 하단 UI로 탭 구성
✅ 아이콘 추가 시 react-native-vector-icons 또는 @expo/vector-icons 사용

사이드 메뉴. 햄버거 버튼으로 열리는 메뉴 구조

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

✅ 관리자 앱, 설정 페이지 등에서 많이 사용됨
✅ react-native-gesture-handler 필수

🔀 중첩 네비게이션 구조 예시

// Tab 안에 Stack 구조

<Tab.Navigator>
  <Tab.Screen name="HomeStack" component={HomeStack} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}