Stack Navigation과 스크린 이동하기

이번 로그는 Stack Navigation의 개념을 알아보고 이를 이용하여 애플리케이션의 스크린을 이동시키는 방법에 대해 공식문서의 예제와 함께 다뤄보도록 하겠다.

시작하기에 앞서 자세한 내용에 대해서는 아래의 공식문서를 참고하면 좋다.
( 참고: https://reactnavigation.org/docs/en/4.x/navigating.html )

Stack Navigator

새로운 스크린으로 이동하기 위해서는 먼저 'createStackNavigator'을 이용하여 스크린의 스택을 쌓아주는 작업이 필요하다.

npm으로 'react-navigation-stack'을 설치하고 아래와 같이 import 한다.

import { createStackNavigator } from 'react-navigation-stack';

다음, 'createStackNavigator' 로 쌓고자 하는 스크린들을 정의한 후 새로운 인스턴스를 생성한다. 아래에 있는 소스코드에 'Home' 이라고 하는 스크린의 이름으로 HomeScreen.tsx 파일을 정의하였다.

그리고 다른 스크린으로 이동하기 위해 'Details' 스크린을 정의하고 초기화면으로는 'Home'을 지정하였다.

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

App Container

만들어진 스택은 최상위의 컨테이너에 담겨져 있어야 하는데 이 컨테이너를 만들기 위해 아래와 같이 'createAppContainer'를 react-navigation으로 부터 import 해야 한다. 그리고 'createAppContainer'에 위에서 만든 'AppNavigator' 를 담고 export 한다.

import { createAppContainer } from 'react-navigation';

// 중략

export default createAppContainer(AppNavigator);

소스코드 예제

이해를 돕고자 공식문서의 있는 예제코드를 확인해 보았다.

// DetailsScreen.tsx
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// 렌더링 할 컴포넌트. <div> => <View>
// 'Go to Details' 버튼을 터치하면 'Details' 스크린으로 이동하게 된다.
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

// 스택 네비게이터 생성하고 스크린 정의
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// 스택 네비게이터를 앱 컨데이너에 담기
export default createAppContainer(AppNavigator);

그리고 Details 스크린에 대해서도 어떤 렌더를 할지 아래와 같이 만들어 준다.

// DetailsScreen.tsx

// 중략

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

결론

Stack Navigator를 이용하여 각 스크린 간의 스택을 쌓고(스크린 사이의 관계를 만든다.) 버튼을 터치하면 지정한 스크린으로 이동하는 방법에 대해 알아 봤다.

스크린간의 이동은 Stack Navigator에 정의하는 작업이 필요하며, 정의한 Stack Navigator는 반드시 AppContainer에 담겨 있어야 한다. 그리고 각 스크린 사이의 이동은 스택이 쌓이는 것이기 때문에 뒤로가기 버튼을 눌렀을 때, 이동하기 전의 스크린으로 돌아가게 된다는 것을 기억해야 한다.!

예를 들어, A -> B -> C -> A의 순으로 스크린을 이동하도록 만들고 C -> A를 하면 이미 앞 스택에 A가 있기 때문에 모든 스택이 POP되고 A로 넘어가게 된다.

참고자료

• https://reactnavigation.org/docs/4.x/getting-started
• https://reactnavigation.org/docs/4.x/app-containers