React Native에서 화면 간 네비게이션 구현하는 방법

React Native 네비게이션이란?

앱을 개발하다 보면 한 화면에서 다른 화면으로 전환해야 하는 상황이 자주 발생합니다. React Native에서는 React Navigation 라이브러리가 이러한 화면 전환(네비게이션)을 담당합니다. 이 글에서는 React Navigation을 활용해 화면 간 이동을 구현하는 과정을 단계별로 살펴보겠습니다.

1. 필수 패키지 설치

화면 탐색 기능을 구현하려면 먼저 아래의 패키지들을 설치해야 합니다.

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

설치가 완료되었다면, 이제 본격적으로 React Native 프로젝트에 네비게이션을 설정해 보겠습니다.

2. 페이지 컴포넌트 생성

앱 프로젝트 내에 pages/ 폴더를 만들고, 그 안에 HomePage.js와 AboutPage.js 두 개의 파일을 생성합니다.

pages/HomePage.js

홈 화면에는 여기를 클릭하세요라는 문구가 적힌 버튼을 표시합니다. 사용자가 이 버튼을 누르면 AboutPage 화면으로 이동하며, 이동 시 파라미터도 함께 전달됩니다.

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';

const HomeScreen = ({ navigation }) => {
    return (
        <Button title='여기를 클릭하세요' onPress={() => navigation.navigate('About', { name: 'About 페이지' })} />
    );
};
export default HomeScreen;

pages/AboutPage.js

About 페이지에서는 아래 코드처럼 간단한 텍스트만 화면에 출력합니다.

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';

const AboutPage = () => {
    return <Text>About 페이지에 도착했습니다!</Text>;
};
export default AboutPage;

3. App.js에서 네비게이션 설정하기

이제 앞서 만든 페이지들을 App.js에서 불러옵니다.

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

추가로 @react-navigation/native에서 NavigationContainer를 임포트합니다. NavigationContainer는 전체 네비게이션 구조를 감싸는 컨테이너 역할을 하며, @react-navigation/stack에서는 createStackNavigator를 가져옵니다.

아래와 같이 createStackNavigator()를 호출해 스택 네비게이터를 생성합니다.

const Stack = createStackNavigator();

이제 <Stack.Navigator>를 부모 컨테이너로 삼아 스택에 화면들을 추가할 수 있습니다. Stack Navigator는 화면 간 전환을 관리해 주며, 새로 열리는 화면은 스택의 맨 위에 차곡차곡 쌓이는 구조로 동작합니다.

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name='Home' component={HomePage} options={{ title: '홈 화면 : 네비게이션' }} />
    <Stack.Screen name='About' component={AboutPage} />
  </Stack.Navigator>
</NavigationContainer>

HomePage 화면의 스택은 다음과 같이 정의합니다.

<Stack.Screen name='Home' component={HomePage} options={{ title: '홈 화면 : 네비게이션' }} />

AboutPage 화면의 스택은 다음과 같습니다.

<Stack.Screen name='About' component={AboutPage} />

4. 전체 코드

지금까지의 내용을 모두 합친, React Native에서 네비게이션 화면을 구현하는 전체 코드는 다음과 같습니다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={HomePage} options={{ title: '홈 화면 : 네비게이션' }} />
        <Stack.Screen name='About' component={AboutPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
export default MyStack;

마무리 및 참고 사항

navigation.navigate('About', { name: 'About 페이지' })처럼 두 번째 인자로 객체를 전달하면 파라미터를 다음 화면으로 넘길 수 있으며, AboutPage에서는 route.params.name 형태로 해당 값을 받아 활용할 수 있습니다. 또한 Stack Navigator의 옵션을 활용하면 헤더 타이틀 변경, 안드로이드 뒤로 가기 버튼 동작 제어 등도 손쉽게 설정할 수 있습니다. 이 기본 구조만 익혀두면 로그인 화면, 상세 페이지 등 실제 앱에서 필요한 다양한 화면 전환 시나리오에 그대로 응용할 수 있습니다.

React Native에서 화면 간 네비게이션 구현하는 방법 – 단계별 완벽 가이드