Version: Next

화면 간 네비게이션

모바일 앱은 단일 화면으로 구성되는 경우가 거의 없다. 여러 화면의 표시와 화면 간 전환을 관리하는 작업은 일반적으로 네비게이터(navigator)라고 불리는 기능이 담당한다.

이 가이드에서는 React Native에서 사용할 수 있는 다양한 네비게이션 컴포넌트를 소개한다. 네비게이션을 처음 사용한다면 React Navigation을 사용하는 것이 좋다. React Navigation은 Android와 iOS에서 모두 사용할 수 있는 스택 네비게이션과 탭 네비게이션 패턴을 제공하는 간단한 네비게이션 솔루션이다.

이미 네이티브 방식으로 네비게이션을 관리하는 앱에 React Native를 통합하거나 React Navigation의 대안을 찾고 있다면, 다음 라이브러리를 사용할 수 있다: react-native-navigation. 이 라이브러리는 두 플랫폼 모두에서 네이티브 네비게이션을 제공한다.

React Navigation은 커뮤니티에서 제공하는 네비게이션 솔루션으로, 개발자가 단 몇 줄의 코드로 앱의 화면을 구성할 수 있게 해주는 독립형 라이브러리이다.

설치 및 설정

먼저 프로젝트에 필요한 패키지를 설치한다:

shell
npm install @react-navigation/native @react-navigation/native-stack

그런 다음 필요한 peer dependencies를 설치한다. 프로젝트가 Expo 관리형 프로젝트인지, bare React Native 프로젝트인지에 따라 다른 커맨드를 실행해야 한다.

Expo 관리형 프로젝트라면 expo로 dependencies를 설치한다:
shell
```
npx expo install react-native-screens react-native-safe-area-context
```
bare React Native 프로젝트라면 npm으로 dependencies를 설치한다:
shell
```
npm install react-native-screens react-native-safe-area-context
```
bare React Native 프로젝트에서 iOS를 사용한다면 CocoaPods가 설치되어 있는지 확인한다. 그런 다음 pod를 설치해 설치를 완료한다:
shell
```
cd ios
pod install
cd ..
```

note

설치 후 peer dependencies와 관련된 경고가 발생할 수 있다. 이는 일부 패키지에서 지정된 버전 범위가 잘못되어 발생하는 경우가 많다. 앱이 정상적으로 빌드된다면 대부분의 경고는 무시해도 괜찮다.

이제 전체 앱을 NavigationContainer로 감싸야 한다. 일반적으로 index.js나 App.js와 같은 엔트리 파일에서 이 작업을 수행한다:

tsx
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* 나머지 앱 코드 */}
    </NavigationContainer>
  );
};

export default App;

이제 디바이스나 시뮬레이터에서 앱을 빌드하고 실행할 준비가 완료되었다.

사용법

이제 홈 화면과 프로필 화면을 가진 앱을 만들 수 있다:

tsx
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

이 예제에서는 Stack.Screen 컴포넌트를 사용해 두 개의 화면(Home과 Profile)을 정의했다. 마찬가지로 원하는 만큼 화면을 추가할 수 있다.

Stack.Screen의 options 프로퍼티를 통해 각 화면의 제목과 같은 옵션을 설정할 수 있다.

각 화면은 React 컴포넌트를 받는 component 프로퍼티를 가진다. 이 컴포넌트들은 navigation이라는 프로퍼티를 받는데, 여기에는 다른 화면으로 이동할 수 있는 다양한 메서드가 포함되어 있다. 예를 들어 navigation.navigate를 사용해 Profile 화면으로 이동할 수 있다:

tsx
const HomeScreen = ({navigation}) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
};
const ProfileScreen = ({navigation, route}) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

이 native-stack 네비게이터는 iOS에서는 UINavigationController, Android에서는 Fragment와 같은 네이티브 API를 사용한다. 따라서 createNativeStackNavigator로 만든 네비게이션은 해당 API 위에 네이티브로 빌드된 앱과 동일하게 동작하며 동일한 성능 특성을 가진다.

React Navigation은 탭이나 드로어와 같은 다양한 네비게이터를 위한 패키지도 제공한다. 이를 사용해 앱에서 다양한 패턴을 구현할 수 있다.

React Navigation에 대한 완전한 소개는 React Navigation 시작하기 가이드를 참고한다.

React Navigation​

설치 및 설정​

사용법​

React Navigation

설치 및 설정

사용법