[RN] React Native에서 화면 전환하기 (feat. React Native Navigation)

React Native에서 Navigation이란?

React를 먼저 공부했다면, React 에서 다른 페이지로 화면 전환을 위해 Router라는 개념을 익히 알 것 입니다. React Native에서도 모바일 화면에서 화면 전환이 필요한 경우가 있습니다. 이때, 마찬가지로 네비게이션(Navigation)이라는 라이브러리를 이용합니다. 네비게이션(Navigation)도 다 같은 종류가 아니라, 여러 종류의 네비게이션이 존재합니다. 이를테면 모바일에서는 웹과는 다르게 하단 부분에 각 화면의 이동 버튼을 통해 이동하게 됩니다. 이러한 것을 탭 네비게이션이라고 합니다. 이런것처럼 대표적으로 세 가지의 네비게이션이 존재합니다.

• 스택 네비게이션 (Stack Navigation)
• 탭 네비게이션 (Tab Navigation)
• 드로어 네비게이션 (Drawer Navigation)

 

스택 네비게이션(Stack Navigation)

먼저, Stack Navigation은 기본적으로 구조가 Stack으로 작동하게 됩니다. 

 

스택이란? 쌓여진 데이터 더미로서, 후인선출(LIFO)의 구조를 가진 자료구조 형태입니다. 

 

 

위의 설명처럼, 페이지 전환시에 각 화면을 방문할 경우에 해당 화면의 데이터 더미들이 Stack에 Push가 되며, 쌓이게 됩니다. 이와 반대로 해당 화면을 벗어나기 위해 "뒤로가기"를 통해 이전의 페이지로 이동할 경우, 해당 페이지는 POP 의 이벤트가 발생하여 Stack에서 꺼내어지게 됩니다. 

 

이는 웹에서도 마찬가지로 다른 페이지로 이동하고 뒤로가기를 누를때, 이전에 쌓인 페이지로 이동하는 것과 같은 원리라고 볼 수 있습니다. 

 

Stack Navigation

 

React Native에서 화면을 생성하는 방법은?

 

애플리케이션에서 네비게이션(Navigation) 을 통해 이동할 수 있는 화면을 추가하기 위해서는 먼저 관련 라이브러리를 설치해야 합니다.

# stack navigation 패키지 설치
$ npm install @react-navigation/native-stack

 

이제 해당 라이브러릴 통해 createNativeStackNavigator()로 스택 네비게이터를 초기화하고 NavigationContainer 내에서 사용합니다.

 

import React from 'react'
import {createNativeStackNavigator} from '@react-navigation/native-stack'

const Stack = createNativeStackNavigator()
const screenOptions = {headerShown: false}

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'화면이름1'} options={screenOptions}>
        {(props) => <Screen1 {...props} />}
      </Stack.Screen>
      <Stack.Screen name={'화면이름2'} options={screenOptions}>
        {(props) => <Screen2 {...props} />}
      </Stack.Screen>
    </Stack.Navigator>
  )
}

export default StackNavigator

 

 <Stack.Navigator> 내부에는 모든 화면을 배치해야 합니다. 각 화면은 <Stack.Screen> 태그와 함께 name과 component 두 가지 props를 전달해야합니다.

 

여기서 name은 컴포넌트의 이름이며 고유해야 하며 특수 문자와 공백을 사용하지 않아야 합니다. component는 화면을 나타내는 컴포넌트입니다.  기본적으로 <Stack.Navigator> 내에서 가장 먼저 오는 화면이 사용자에게 먼저 표시됩니다. 즉, 스택에 이미 Push가 된 화면이 됩니다.

 

Stack.Navigator에서 initialRouteName 속성을 사용하여 기본 화면을 지정할 수 있습니다.

 

 

위의 코드를 살펴보면, 현재 기본 화면 화면이름1 을 가장 먼저 볼 수 있습니다. 하지만, 화면이름2 를 이동할 수 있는 방법이 없습니다. 웹이라면, URL을 타고 이동할 수 있겠지만, 앱에서는 그렇게 할 수 가 없습니다. 

 

Stack.Navigation에서 화면의 이동을 위해서 해당 Screen 즉, 화면에서 navigation 이라는 props를 받아와 사용하면 됩니다.

 

 

Stack.Navigator 를 통해서 감싸주어 화면을 구성했다면, 위의 navigation을 통해 이동할 수 가 있게 됩니다.

 

화면간의 이동하는 방법은?