Hello React Navigation

웹 브라우저에서는 앵커(<a>) 태그를 사용하여 다른 페이지로 연결할 수 있다. 사용자가 링크를 클릭하면 URL이 브라우저 히스토리 스택에 푸시(push)된다. 사용자가 뒤로 가기 버튼을 누르면 브라우저는 히스토리 스택의 맨 위에서 항목을 팝(pop)하므로 이전에 방문한 페이지로 돌아간다. React Native에는 웹 브라우저와 같은 전역 히스토리 스택을 관리하는 기능이 내장되어 있지 않다. 바로 여기에서 React Navigation이 등장한다.

React Navigation의 네이티브 스택 네비게이터는 앱의 화면 전환과 탐색 히스토리를 관리할 수 있는 방법을 제공한다. 앱이 하나의 스택 네비게이터만 사용한다면, 이는 웹 브라우저가 탐색 상태를 처리하는 방식과 개념적으로 유사하다. 사용자가 앱과 상호 작용할 때 앱은 탐색 스택에서 항목을 푸시하고 팝하며, 사용자는 다른 화면을 보게 된다. 그러나 네이티브 스택 네비게이터는 웹 브라우저와 달리 네이티브 플랫폼에 최적화된 화면 전환 애니메이션과 제스처를 제공한다는 점에서 차이가 있다.

가장 일반적인 네비게이터인 createNativeStackNavigator 부터 시작해 보자.

네이티브 스택 네비게이터 라이브러리 설치

앞선 가이드에서 설치한 라이브러리는 네비게이터를 위한 구성 요소와 공유 유틸리티를 제공하는 패키지다.

React Navigation의 각 네비게이터는 각각의 자체 라이브러리에서 제공한다.

네이티브 스택 네비게이터를 사용하려면 @react-navigation/native-stack 을 설치해야 한다.

npm install @react-navigation/native-stack

네이티브 스택 네비게이터 생성하기

createNativeStackNavigator 는 Screen 과 Navigator 라는 2개의 프로퍼티를 포함한 객체를 반환하는 함수다. 둘 다 네비게이터를 설정하는 데 사용되는 React 컴포넌트다. Navigator 는 자식으로 Screen 요소를 포함하여 라우트에 대한 설정을 정의한다.

NavigationContainer 는 네비게이션 트리를 관리하고 네비게이션 상태를 포함하는 컴포넌트다. 이 컴포넌트는 모든 네비게이터 구조를 래핑해야 한다. 일반적으로 이 컴포넌트는 앱의 루트에서 렌더링된다.

// In App.js in a new project

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

위의 코드를 실행하면 빈 탐색 바와 HomeScreen 화면이 표시된다. 탐색 바와 콘텐츠 영역에 대해 표시되는 스타일은 스택 네비게이터의 기본 설정이며, 나중에 이를 변경하는 방법을 배우게 될 것이다.

네비게이터 설정하기

모든 라우트 설정은 네비게이터에 대한 props로 지정된다. 우리는 네비게이터에 어떤 props도 전달하지 않았기 때문에 기본 설정을 사용한다.

네이티브 스택 네비게이터에 두 번째 화면을 추가하고 Home 화면이 먼저 렌더링되도록 구성해 보자.

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

이제 우리의 스택에는 Home 라우트와 Details 라우트, 두 개의 라우트가 있다. 라우트는 Screen 컴포넌트를 사용하여 지정할 수 있다. Screen 컴포넌트는 탐색에 사용할 라우트의 이름에 해당하는 name prop과 렌더링할 컴포넌트에 해당하는 component prop을 받는다.

여기서 Home 라우트는 HomeScreen 컴포넌트에 해당하고, Details 라우트는 DetailsScreen 컴포넌트에 해당한다. 스택의 초기 경로는 Home 라우트다. Details로 변경하고 앱을 다시 로드해 보자(React Native의 Fast Refresh는 initialRouteName의 변경 사항을 업데이트하지 않는다). 이제 Details 화면이 표시되는 것을 확인할 수 있다. 그런 다음 다시 Home 으로 변경하고 한 번 더 다시 로드한다.

옵션 지정하기

네비게이터의 각 화면은 헤더에 렌더링할 제목과 같은 일부 옵션을 지정할 수 있다. 이러한 옵션은 각 화면 컴포넌트의 options prop으로 전달할 수 있다.

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

때로는 네비게이터의 모든 화면에 동일한 옵션을 지정하고 싶을 수 있다. 이를 위해 네비게이터에 screenOptions prop을 전달할 수 있다.

추가 props 전달하기

때로는 화면에 추가 props를 전달하고 싶을 수 있다. 이를 위해 두 가지 접근 방식을 사용할 수 있다:

1. React context를 사용하고 navigator를 context provider로 감싸서 데이터를 전달한다(권장).
2. component prop을 지정하는 대신 화면에 렌더 콜백을 사용한다.

<Stack.Screen name="Home">
  {(props) => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>