들어가기 전에

• 요새는 번역기가 잘 되어있다 보니, 번역기를 사용하면 어느정도 문맥 등을 파악할 수 있는 것이 사실이다. 하지만 어떤 사람에게는/혹은 어떤 날에는 그것 조차 눈에 잘 들어오지 않을 때가 있을 것이다. 1차적으로는 나 자신에게 도움이 되고, 2차적으로는 필요한 누군가에게 도움이 될 수 있지 않을까 싶어 소소하게나마 번역을 해보았다.
• 오류가 있을 시 댓글로 알려주시면 감사하겠습니다.🙂
• 이 페이지는 React Native 공식 문서의 개인적인 번역본입니다.
  • https://reactnative.dev/docs/navigation
    • Last updated on Jun 21, 2023

---

🏁 화면간의 탐색 기능

모바일 앱은 대부분 여러 개의 화면으로 이루어져 있습니다. 'Navigatior(네비게이터(탐색기))'라고 불리는 것이 여러 화면들의 표시 및 전환을 관리합니다.

이 가이드는 리액트 네이티브에서 사용가능한 다양한 네비게이션 컴포넌트를 다룹니다. 탐색 기능을 시작하려면, React Navigation 을 사용할 수 있습니다. React Navigation 은 안드로이드, IOS 양쪽 모두에게 공통적인 stack navigation과 tabbed navigation 패턴을 나타낼 수 있는 기능을 가진, 간단한 탐색 솔루션을 제공합니다.

이미 네비게이션을 기본적으로 관리하고 있는 앱에 리액트 네이티브를 통합하고 싶거나, 혹은 리액트 네비게이션의 대안을 찾고 있다면 다음 라이브러리가 양 플랫폼에게 기본 네비게이션을 제공합니다 react-native-navigation.

ReactNavigation(리액트 네비게이션)

개발자들가 몇 줄의 코드로 앱의 화면을 설정하게 해주는, 독립적인 라이브러리 입니다.

설치 및 설정

먼저, 프로젝트에 설치해야합니다.

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

그 다음, 필요한 peer 종속성을 설치합니다. Expo가 프로젝트를 관리하는지 또는 기본 리액트 네이티브 프로젝트인지에 따라 다른 명령어를 사용해야 합니다.

• 엑스포가 관리하는 프로젝트라면, expo로 설치

  npx expo install react-native-screens react-native-safe-area-context

• 기본 리액트 네이티브 프로젝트라면, npm으로 설치

  npm install react-native-screens react-native-safe-area-context

  • ios를 위한 기본 리액트 네이티브 프로젝트인 경우, Cocoapod이 설치되어있어야 합니다. 그 후 pods를 설치해서 과정을 완료합니다.

    cd ios
pod install
cd ..

    NOTE
    설치 후에 peer 종속성 관련 경고가 뜰 수도 있습니다. 이런 경고들은 대체로 몇 패키지들의 버젼이 맞지 않아 생깁니다. 앱이 문제없이 빌드되는 한 대부분의 경고는 무시할 수 있습니다.

이제 전체 앱을 NavigationContainer 로 감싸야합니다. 보통 index.js 나 App.js 같은 entry file(진입 파일)에 많이 합니다.

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};
export default App;
export default App;

디바이스/시뮬레이터에서 앱 빌드 및 실행할 준비가 끝났습니다.

Usage

이제 홈 화면과 프로필 화면이 있는 app을 생성할 수 있습니다.

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 component 를 사용해 정의됩니다. 이와 같은 방법으로 원하는 만큼의 화면을 정의할 수 있습니다.

Stack.Screen의 prop인 options로 화면제목을 설정할 수 있습니다.

각 화면은 리액트 컴포넌트인 component prop을 사용합니다. 이 컴포넌트들은 다양한 메소드를 가진navigation이란 prop을 받습니다. 예를들어, navigation.navigate 를 사용해 Profile 스크린으로 이동할 수 있습니다.

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 으로 구축된 네비게이션은 API 위에 기본적으로 구축된 앱과 동일하게 동작하며, 성능 특성이 동일합니다.

리액트 네비게이션은 tabs나 drawer같은 다양한 네비게이터를 위한 패키지도 있습니다. 이를 사용해 앱에서 다양한 패턴을 구현할 수 있죠.

리액트 네비게이션 인트로를 완료하려면, 아래의 리액트 React Navigation Getting Started Guide 를 따라해보세요.

[끝]

---