React Native에서 내비게이션 구현하기

React Native에서 내비게이션 구현하기

모바일 애플리케이션 개발 시, 다양한 화면 간의 이동은 필수적인 요소입니다. React Native 프레임워크는 기본적으로 내비게이션 기능을 제공하지 않기 때문에, 외부 라이브러리를 사용하여 이를 구현해야 합니다. 특히 ‘React Navigation’은 React Native에서 가장 널리 사용되는 내비게이션 솔루션으로, 스택, 탭, 드로어와 같은 다양한 내비게이션 스타일을 지원합니다. 이번 글에서는 React Native의 내비게이션을 효율적으로 구현하는 방법에 대해 알아보겠습니다.

React Navigation 소개

React Navigation은 모바일 애플리케이션 내비게이션 기능을 쉽게 추가할 수 있게 해주는 라이브러리입니다. 이 라이브러리는 자바스크립트로 작성되어 있으며, iOS와 Android의 네이티브 내비게이션 API를 추상화하여 개발자에게 친숙한 API를 제공합니다.

필수 라이브러리 설치하기

내비게이션 기능을 추가하기 위해서는 우선 필요한 라이브러리들을 설치해야 합니다. 다음은 기본적인 설치 명령어입니다:

• npm install --save @react-navigation/native
• npm install --save react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

위의 명령어를 통해 기본적인 내비게이션 라이브러리를 설치한 후, 추가로 필요에 따라 다른 내비게이션 스타일 라이브러리도 설치할 수 있습니다.

• Stack Navigation: npm install --save @react-navigation/stack
• Drawer Navigation: npm install --save @react-navigation/drawer
• Bottom Tab Navigation: npm install --save @react-navigation/bottom-tabs
• Material Bottom Tab Navigation: npm install --save @react-navigation/material-bottom-tabs react-native-paper
• Material Top Tab Navigation: npm install --save @react-navigation/material-top-tabs react-native-tab-view

React Navigation의 종류

React Navigation은 다양한 내비게이션 스타일을 제공하는데, 각 스타일은 다음과 같은 특성을 지니고 있습니다:

• 스택 네비게이션 (Stack Navigation): 현재 화면 위에 새로운 화면을 쌓는 방식으로, 사용자가 쉽게 이전 화면으로 돌아갈 수 있도록 돕습니다.
• 탭 네비게이션 (Tab Navigation): 일반적으로 하단에 위치하는 탭을 통해 여러 화면 간에 손쉽게 전환할 수 있게 합니다.
• 드로어 네비게이션 (Drawer Navigation): 사이드 바에서 화면 간 전환을 할 수 있게 하는 방식으로, 주로 메뉴 형태로 구성이 됩니다.

스택 네비게이션 사용하기

스택 네비게이션을 구현하기 위해 먼저 createNativeStackNavigator 함수를 사용하여 네비게이터를 생성합니다. 아래는 스택 네비게이션의 기본적인 구현 예제입니다:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
  return (
    
      
        
        
      
    
  );
}

탭 네비게이션 사용하기

탭 네비게이션을 구현할 때는 createBottomTabNavigator 또는 createMaterialTopTabNavigator를 사용할 수 있습니다. 이를 통해 여러 화면을 탭으로 나누어 사용자에게 제공할 수 있습니다.

드로어 네비게이션 사용하기

드로어 네비게이션은 createDrawerNavigator를 통해 사용할 수 있으며, 화면의 좌우에서 메뉴를 표시할 수 있도록 구현할 수 있습니다. 아래와 같은 방식으로 설정할 수 있습니다:

import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function App() {
  return (
    
      
        
        
      
    
  );
}

화면 간 데이터 전달하기

각 화면 간에 데이터를 전달할 때는 내비게이션의 navigate 함수를 사용하여 두 번째 매개변수로 전달할 수 있습니다. 그런 다음, 대상 화면에서는 route.params를 통해 접근할 수 있습니다.

function HomeScreen({ navigation }) {
  return (
     navigation.navigate('Details', { itemId: 86 })} 
    />
  );
}
function DetailsScreen({ route }) {
  const { itemId } = route.params;
  return Details for item: {itemId};
}

결론

React Native에서 내비게이션을 구현하는 것은 다양한 화면 간의 원활한 전환을 가능하게 하며, 사용자 경험을 개선하는 데 중요한 역할을 합니다. React Navigation 라이브러리를 활용하면 손쉽게 스택, 탭, 드로어와 같은 다양한 내비게이션 스타일을 구현할 수 있습니다. 위의 내용을 참고하여 여러분의 React Native 애플리케이션에 적용해 보시기 바랍니다.

자주 찾는 질문 Q&A