React Native Navigation 라이브러리 설치 및 사용법

React Native Navigation 라이브러리 설치와 사용법을 자세히 알아보겠습니다. 필수 패키지 설치부터 Android 및 iOS 설정, 화면 등록과 Stack Navigator, Tab Navigator, Drawer Navigator 사용까지, React Native Navigation 라이브러리와 관련된 내용을 하나 하나 살펴보겠습니다.

 

React Native Navigation 라이브러리 소개

React Native Navigation 라이브러리는 Wix에서 개발한 네이티브 네비게이션 라이브러리입니다. JavaScript 기반의 라이브러리와 달리, 이 라이브러리는 네이티브 UI 컴포넌트를 사용하여 매우 부드러운 화면 전환을 제공하고 성능을 최적화합니다. 복잡한 화면 전환이 많은 대규모 프로젝트나 성능이 중요한 경우에 사용하기 적합합니다.

 

React Native Navigation을 선택해야 하는 가장 큰 이유는 네이티브와의 깊은 통합입니다. 이 라이브러리는 네이티브 UI 컴포넌트를 사용하기 때문에 사용자가 느끼기에 더욱 자연스럽고 빠릅니다. 또한, 이 라이브러리는 네이티브 코드를 활용해 개발자에게 더 많은 제어권을 제공합니다.

 

React Native Navigation 라이브러리 설치하기

React Native Navigation을 설치하려면 먼저 필수 패키지를 설치한 후, Android 및 iOS 설정을 별도로 진행해야 합니다.

필수 패키지 설치

React Native Navigation을 설치하려면 먼저 다음 명령어를 통해 라이브러리를 설치합니다.

npm install react-native-navigation

 

설치가 완료된 후, 각 플랫폼(Android 및 iOS)에서 네이티브 설정을 진행해야 합니다. 이 과정이 React Navigation 라이브러리와 비교했을 때 더 많은 설정이 필요하지만, 결과적으로 네이티브 수준의 성능을 제공합니다.

Android 및 iOS 설정 방법

Android 설정

• Android 프로젝트 폴더에서 android/app/src/main/java/com/yourprojectname/MainActivity.java 파일을 엽니다.
• 파일 상단에 다음과 같은 import 구문을 추가합니다.

import com.reactnativenavigation.NavigationActivity;

• MainActivity 클래스가 NavigationActivity를 상속받도록 수정합니다.

public class MainActivity extends NavigationActivity {
	// 생략 (기존 코드 유지)
}

iOS 설정

• iOS 폴더로 이동하여 CocoaPods을 사용해 필요한 pod들을 설치합니다.

cd ios
pod install

 

 

 

React Native Navigation 라이브러리 사용법

React Native Navigation을 설치한 후에는 화면을 등록하고 네비게이션 트리를 설정해야 합니다. 기본적인 화면 등록과 Stack Navigator 뿐만 아니라 Tab Navigator와 Drawer Navigator 사용 방법을 알아보겠습니다.

기본 화면 등록과 Root 설정

React Native Navigation을 사용하려면 먼저 각 화면을 네이티브에 등록해야 합니다. 다음은 기본적인 화면 등록과 Root 설정 방법입니다.

import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

Navigation.registerComponent('HomeScreen', () => HomeScreen);
Navigation.registerComponent('DetailsScreen', () => DetailsScreen);

Navigation.events().registerAppLaunchedListener(() => {
	Navigation.setRoot({
		root: {
			stack: {
				children: [
					{
						component: {
							name: 'HomeScreen'
						}
					}
				]
			}
		}
	});
});

 

위 코드에서 Navigation.registerComponent를 통해 각 화면을 등록하고, Navigation.setRoot를 사용해 앱의 초기 화면을 설정합니다. 이 과정은 React Navigation보다 다소 복잡하지만, 네이티브 수준의 성능과 제어력을 제공합니다.

Stack Navigator 사용하기

React Native Navigation에서 Stack Navigator를 사용하는 방법은 다음과 같습니다. Stack은 화면을 쌓아 올리는 방식으로 전환을 관리하며, 주로 '뒤로 가기' 기능이 필요한 경우에 사용됩니다.

Navigation.setRoot({
	root: {
		stack: {
			id: 'AppStack',
			children: [
				{
					component: {
						name: 'HomeScreen'
					}
				},
				{
					component: {
						name: 'DetailsScreen'
					}
				}
			]
		}
	}
});

 

위 코드에서 stack을 사용해 여러 화면을 추가할 수 있으며, 각 화면은 component 객체로 정의됩니다. 이를 통해 자연스러운 화면 전환이 가능합니다.

Tab Navigator 사용하기

Tab Navigator는 앱 하단에 탭 메뉴를 추가하여 사용자가 여러 화면을 쉽게 전환할 수 있도록 도와줍니다. 이를 통해 직관적인 화면 전환이 가능하며, 주로 주요 섹션 간의 이동에 사용됩니다.

Navigation.setRoot({
	root: {
		bottomTabs: {
			children: [
				{
					stack: {
						children: [
							{
								component: {
									name: 'HomeScreen'
								}
							}
						]
					},
					options: {
						bottomTab: {
							text: 'Home',
							icon: require('./path/to/home_icon.png')
						}
					}
				},
				{
					stack: {
						children: [
							{
								component: {
									name: 'SettingsScreen'
								}
							}
						]
					},
					options: {
						bottomTab: {
							text: 'Settings',
							icon: require('./path/to/settings_icon.png')
						}
					}
				}
			]
		}
	}
});

 

위 코드에서 bottomTabs를 사용해 여러 화면을 탭으로 구성할 수 있으며, 각 탭은 stack으로 구성됩니다. 이를 통해 사용자가 쉽게 주요 화면을 탐색할 수 있습니다.

Drawer Navigator 사용하기

Drawer Navigator는 화면의 측면에서 슬라이드하여 메뉴를 표시하는 방식으로, 다양한 섹션에 대한 빠른 접근을 제공합니다. 사용자는 앱의 여러 기능을 드로어 메뉴를 통해 쉽게 탐색할 수 있습니다.

Navigation.setRoot({
	root: {
		sideMenu: {
			left: {
				component: {
					name: 'SideMenu'
				}
			},
			center: {
				stack: {
					children: [
						{
							component: {
								name: 'HomeScreen'
							}
						}
					]
				}
			}
		}
	}
});

 

위 코드에서 sideMenu를 사용해 드로어 네비게이터를 설정하며, left에 드로어 메뉴 컴포넌트를 정의하고 center에 주요 화면을 배치했습니다. 이를 통해 사용자는 화면의 왼쪽에서 슬라이드하여 메뉴에 접근할 수 있습니다.

 

마무리하며

React Native Navigation 라이브러리는 성능과 사용자 경험을 극대화하기 위한 최고의 네이티브 네비게이션 라이브러리입니다. 이 글에서는 React Native Navigation 라이브러리의 설치 및 설정 방법, 그리고 기본적인 사용법을 알아봤습니다. 네이티브 성능을 요구하는 프로젝트라면, 이 라이브러리는 필수적인 선택이 될 것입니다. 또 다른 포스트를 통해 React Navigation 라이브러리 사용법도 올려놨는데요. 두 라이브러리를 비교해서 적합한 것을 선택하면 좋을 것 같습니다.