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

React Navigation 라이브러리 설치 및 사용법을 단계별로 알아보겠습니다. 필수 패키지 설치부터 Stack, Tab, Drawer Navigator 설정까지 React Native 앱에서 네비게이션을 구현하는 방법을 살펴보겠습니다.

 

React Navigation 라이브러리 소개

React Navigation은 JavaScript로 작성된 네비게이션 라이브러리로, React Native 앱에서 화면 간의 전환을 쉽게 관리할 수 있게 해줍니다. 다양한 네비게이션 유형(Stack, Tab, Drawer 등)을 지원하며, 설정과 커스터마이징이 간단한 것이 특징입니다. 초보자부터 숙련된 개발자까지 모두 사용하기에 적합한 라이브러리입니다.

 

React Navigation은 사용성과 유연성 면에서 큰 장점을 가지고 있습니다. 특히, 여러 종류의 네비게이션(Stack, Tab, Drawer 등)을 손쉽게 구현할 수 있어 복잡한 앱 구조에서도 유연하게 사용할 수 있습니다.

 

React Navigation 라이브러리 설치하기

React Navigation을 사용하려면 먼저 몇 가지 필수 패키지를 설치해야 합니다. 설치 과정은 간단하지만, 추가적으로 필요한 종속성들을 설치하는 것도 잊지 말아야 합니다.

필수 패키지 설치

React Navigation을 설치하기 위해서는 먼저 @react-navigation/native 패키지를 설치해야 합니다. 다음 명령어를 사용해서 설치할 수 있습니다.

npm install @react-navigation/native

 

이후, 몇 가지 필수 종속성도 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

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

플랫폼별 추가 설정

필수 패키지를 설치한 후에는 플랫폼별 추가 설정을 해야 합니다. 다음은 Android와 iOS에서 추가로 필요한 설정 방법입니다.

Android 설정

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

import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

• MainActivity 클래스 내부의 getMainComponentName() 메서드 아래에 다음 내용을 추가하여 제스처 핸들러를 활성화합니다.

@Override
protected ReactRootView createRootView() {
	return new RNGestureHandlerEnabledRootView(this);
}

iOS 설정

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

cd ios
pod install

React Navigation 라이브러리 사용법

React Navigation을 설치한 후에는 네비게이터를 설정해야 합니다. 가장 기본적인 Stack Navigator 설정과 추가적인 Tab Navigator 및 Drawer Navigator 사용 방법을 알아보겠습니다.

Stack Navigator 설정하기

Stack Navigator는 가장 기본적인 화면 전환 방식으로, 하나의 화면에서 다음 화면으로 이동할 때 사용됩니다. 아래는 Stack Navigator를 설정하는 간단한 예시입니다.

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

const Stack = createStackNavigator();

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

export default App;

 

위 코드에서 NavigationContainer는 네비게이션 트리를 관리하는 컨테이너 역할을 합니다. Stack.Navigator는 화면 간의 전환을 관리하며, 각 화면은 Stack.Screen으로 정의됩니다. 이를 통해 간단하게 여러 화면을 오갈 수 있습니다.

Tab Navigator와 Drawer Navigator 추가하기

Tab Navigator는 하단에 여러 탭을 표시하여 사용자가 쉽게 화면을 전환할 수 있게 해줍니다. 예를 들어, 홈 화면과 설정 화면 간에 빠르게 전환하고 싶을 때 유용합니다. Tab Navigator를 추가하려면 다음과 같이 설정할 수 있습니다.

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

const Tab = createBottomTabNavigator();

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

 

Drawer Navigator는 측면에서 슬라이드하여 메뉴를 표시하는 방식으로, 앱의 다양한 섹션에 접근하기 쉽게 만들어 줍니다.

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

const Drawer = createDrawerNavigator();

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

 

이렇게 다양한 네비게이터를 결합하여 앱 내에서 여러 화면을 유연하게 관리할 수 있습니다.

 

마무리하며

React Navigation 라이브러리는 React Native 앱에서 화면 전환을 쉽게 관리할 수 있는 강력한 라이브러리입니다. 설치 과정부터 Stack, Tab, Drawer Navigator 설정과 사용법까지 알아봤습니다. 또 다른 네비게이션 라이브러리인 React Native Navigation에 대해서도 또 다른 포스트를 통해 이야기해보려고 하니 두 글을 읽어보고 비교해보면 좋을 것 같습니다.