[React Native] React Navigation 라이브러리

React Navigation 라이브러리

들어가며

• 리액트 네이티브(React Native) 앱에서 화면 간의 전환을 쉽게 구현할 수 있도록 도와주는 라이브러리인 React Navigation에 대해 간단하게 정리해본다.

 

React Navigation

개념

• React Native 앱에서 화면 간의 전환(네비게이션)을 쉽게 구현할 수 있도록 도와주는 오픈소스 라이브러리
• React Native 앱에 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 추가할 수 있게 해준다.
• 웹의 라우팅(@react-router@)과 비슷하지만, 모바일 환경에 맞춘 기능(스와이프, 제스처, 헤더 애니메이션 등)을 제공한다.

 

주요 기능

기능	설명
스택 네비게이션 (Stack Navigation)	- A 화면 → B 화면 이동 및 뒤로가기를 할 수 있다. - 화면이 스택 구조로 쌓인다.
탭 네비게이션 (Tab Navigation)	화면 하단에 탭 메뉴를 만들어 여러 화면을 쉽게 전환할 수 있다.
드로어 네비게이션 (Drawer Navigation)	햄버거 버튼을 눌러 열리는 사이드 메뉴를 구현할 수 있다.
중첩 네비게이션 (Nested Navigation)	스택 + 탭 + 드로어 같이 복합 구조의 기능 구현도 가능하다.
애니메이션/제스처 (Animations/Gestures)	화면 전환 시 애니메이션과 스와이프 제스처를 지원한다.
스크린 옵션 (Screen Options)	각 화면별로 헤더 타이틀, 스타일, 제스처 등을 설정할 수 있다.

 

설치하기

• 우선 코어(Core) 패키지를 설치해준다.

$ npm install @react-navigation/native

 

• React Navigation이 내부적으로 사용하는 필수 의존성 라이브러리들을 설치한다. (Expo 기준)

$ expo install react-native-screens react-native-safe-area-context

 

• 스택 네비게이션(Stack Navigation)을 사용하고자 할 경우, 아래의 패키지를 설치한다.

$ expo install @react-navigation/native-stack

 

• 탭 네비게이션(Tab Navigation)을 사용하고자 할 경우, 아래의 패키지를 설치한다.

$ expo install @react-navigation/bottom-tabs

 

• 드로어 네비게이션(Drawer Navigation)을 사용하고자 할 경우, 아래의 패키지를 설치한다.
  
  • 햄버거 메뉴(사이드 메뉴)를 구현할 때 사용한다.

$ expo install @react-navigation/drawer

 

초기 화면 설정하기

방법 ①

•  @<Stack.Navigator>@ 안에 첫 번째 @<Stack.Screen>@으로 설정해준다. (초기 화면으로 자동 설정)

<Stack.Navigator>
  <Stack.Screen name="AllProducts" component={AllProducts} /> // 초기 화면
  <Stack.Screen name="ProductDetails" component={ProductDetails} />
</Stack.Navigator>

 

방법 ②

• @<Stack.Navigator>@에 @initialRouteName@이라는 속성(prop)을 사용하여 초기 화면을 지정해준다.

<Stack.Navigator initialRouteName="ProductDetails">
  <Stack.Screen name="AllProducts" component={AllProducts} /> 
  <Stack.Screen name="ProductDetails" component={ProductDetails} /> // 초기 화면
</Stack.Navigator>

 

스크린에 옵션 설정하기

• React Navigation에서 스크린에 옵션을 추가한다는 것은 해당 화면에 표시되는 헤더(Header)나 기타 화면 속성들을 설정한다는 것을 의미한다.
• 예) 제목(title)을 바꾸기, 헤더 숨기기, 오른쪽에 버튼 추가하기 등

 

자주 사용되는 옵션들

옵션	설명
@title@	헤더 제목 설정
@headerShown@	헤더 보이기/숨기기
@headerTitleAlign@	@left@ 또는 @center@
@headerRight@	오른쪽에 커스텀 컴포넌트 삽입
@headerLeft@	- 왼쪽에 커스텀 컴포넌트 삽입 - 기본값: 뒤로가기 버튼
@gestureEnabled@	제스쳐 뒤로가기 허용 여부 (iOS에서 사용하면 유용)
@animation@	@none@, @slide_from_right@ 등 스크린 이동 시 애니메이션 효과 설정

 

방법 ① : 스크린 정의 시 options 속성 사용하기

• 가장 일반적인 방법으로, @<Stack.Screen>@ 컴포넌트에 @options@ 속성을 이용하여 설정하는 방법이다.
• 해당 개별 스크린에 옵션이 설정된다.

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '홈 화면',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

 

⇒ @title@ : 헤더에 표시할 제목

⇒ @headerStyle@ : 헤더의 배경 스타일

⇒ @headerTintColor@ : 뒤로가기 버튼 등의 색상

⇒ @headerTitleStyle@ : 제목의 폰트 스타일

 

방법 ② : 스크린 파일 내부에서 navigation.setOptions() 사용하기

• 이 방법은 동적으로 옵션을 설정할 때 사용한다.
• 예) 사용자 이름에 따라 제목을 바꿔야 할 경우 등

import { useLayoutEffect } from 'react';

function HomeScreen({ navigation }) {
  // 동적으로 타이틀 생성하기
  useLayoutEffect(() => {
    navigation.setOptions({
      title: '홈 화면',
      headerStyle: { backgroundColor: 'skyblue' },
    });
  }, [navigation]);

  return (
    <View>
      <Text>홈 화면 내용</Text>
    </View>
  );
}

 

여러 스크린에 공통 옵션 설정하기

• 공통 옵션을 모든 스크린에 적용하려면 @<Stack.Navigator>@(부모 컴포넌트)에 @screenOptions@를 지정한다.

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      screenOptions={{   // ✅ 공통 옵션 적용
        headerStyle: {
          backgroundColor: '#1e90ff',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        contentStyle: {
          backgroundColor: '#f9f9f9',
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

 

사용 예제

• 네비게이션 설정은 프로젝트의 최상단 경로(@/@)에 있는 @App.js@ 파일에서 해준다.

 

Stack Navigation

import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>홈 화면</Text>
      <Button
        title="상세 화면으로 이동"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>상세 화면</Text>
    </View>
  );
}

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

 

Tab Navigation

import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>홈</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View>
      <Text>설정</Text>
    </View>
  );
}

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

 

Drawer Navigation

import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>홈</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>프로필</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

 

중첩 네비게이션(Nested Navigation)

• Tab 안에 Stack을 중첩한 예제 코드

import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const HomeStack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// Stack 내에 들어갈 화면들
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>🏠 홈 화면</Text>
      <Button title="상세 화면으로 이동" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>📄 상세 화면</Text>
    </View>
  );
}

// HomeStack 네비게이션 구성
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

// 탭에 들어갈 다른 화면
function SettingsScreen() {
  return (
    <View>
      <Text>⚙️ 설정 화면</Text>
    </View>
  );
}

// 전체 네비게이션 구조
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="HomeTab" component={HomeStackScreen} options={{ title: '홈' }} />
        <Tab.Screen name="Settings" component={SettingsScreen} options={{ title: '설정' }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

 

참고 사이트

React Navigation Docs