[RN] Native Stack 사용하기

wnsxk2·2025년 1월 7일

💡 개요

React Native에서 화면이 Stack처럼 쌓여서 이동하는 기능을 제공하기 위해 Native Stack을 적용하는 방법에 대해 알아보겠습니다.

Stack이란?

Stack의 개념

페이지들이 "쌓이는" 구조를 stack이라고 합니다. 쉽게 말해, 현재 페이지 위에 새 페이지를 쌓아 올리고, 뒤로 가기를 하면 아래에 쌓인 페이지로 돌아가는 방식으로 화면 이동을 구현합니다. 이 방식은 여러 단계의 화면 전환이 필요한 경우에 유용하게 사용됩니다.

Native Stack의 특징

native-stack은 기기의 네이티브 기능을 활용하여 stack을 구현합니다.

React Navigation의 기본 stack: JavaScript로 구현된 화면 전환 애니메이션을 사용.
Native Stack: 스마트폰의 네이티브 화면 전환 효과를 사용.

Stack vs Native Stack

특징	Stack	Native Stack
커스터마이징	자유로움	제한적
성능	기기에 따라 다름	빠르고 부드러움

구현하기

이제 Native Stack을 사용하여 화면 전환을 구현하는 과정을 살펴보겠습니다.

1️⃣ 라이브러리 설치

React Navigation을 활용하려면 관련 라이브러리를 설치해야 합니다. 자신의 React Native 버전에 맞는 패키지를 설치합니다.

# Navigation 설치
yarn add @react-navigation/native

yarn add react-native-screens react-native-safe-area-context

# Native Stack 설치
yarn add @react-navigation/native-stack

✨ Tip: npm을 사용하는 경우, 명령어를 yarn 대신 npm install로 변경하세요.

2️⃣ Native Stack 설정하기

다음은 Native Stack을 설정하는 코드입니다. createNativeStackNavigator를 이용해 네비게이션을 정의합니다.

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

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='shopping' component={HomeScreen} />
      <Stack.Screen name='browser' component={BrowserScreen} />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
};