화면 간 네비게이션

모바일 앱은 보통 단일 화면으로 구성되지 않는다. 여러 화면 간의 전환과 화면 표시 관리는 일반적으로 네비게이션 컴포넌트가 담당한다.

이 가이드에서는 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

다음으로, 필요한 피어 의존성을 설치한다. 프로젝트가 Expo 관리형 프로젝트인지, 아니면 일반 React Native 프로젝트인지에 따라 다른 명령어를 실행해야 한다.

Expo 관리형 프로젝트라면, expo를 사용해 의존성을 설치한다:
shell
```
npx expo install react-native-screens react-native-safe-area-context
```
일반 React Native 프로젝트라면, npm을 사용해 의존성을 설치한다:
shell
```
npm install react-native-screens react-native-safe-area-context
```
iOS에서 일반 React Native 프로젝트를 사용한다면, CocoaPods가 설치되어 있는지 확인한다. 그런 다음, 설치를 완료하기 위해 Pod를 설치한다:
shell
```
cd ios
pod install
cd ..
```

note

설치 후 피어 의존성과 관련된 경고 메시지가 표시될 수 있다. 이는 일부 패키지에 지정된 버전 범위가 잘못되었기 때문에 발생한다. 앱이 정상적으로 빌드된다면 대부분의 경고를 무시해도 된다.

이제 전체 앱을 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 네비게이터는 네이티브 API를 사용한다. iOS에서는 UINavigationController, Android에서는 Fragment를 사용해 createNativeStackNavigator로 구현된 네비게이션이 네이티브 앱과 동일하게 동작하며 동일한 성능 특성을 가진다.

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

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

React Navigation​

설치 및 설정​

사용법​

React Navigation

설치 및 설정

사용법