React Native 네비게이션 기초: react-navigation으로 화면 전환 구현하기

입력과 버튼까지 다뤘다면
이제 앱다운 앱을 만들기 위한 마지막 기본 퍼즐이 남는다.

바로 화면 전환이다.

• 로그인 화면 → 홈 화면
• 목록 화면 → 상세 화면
• 뒤로 가기 처리

React Native에는
화면 전환이 기본으로 제공되지 않는다.

그래서 대부분의 앱에서
react-navigation 라이브러리를 사용한다.

이 글에서는
react-navigation을 처음 쓰는 사람 기준으로
개념부터 가장 기본적인 사용법까지 정리한다.

---

이 글이 필요한 사람

• 화면이 하나짜리 앱에서 다음 단계로 가고 싶은 경우
• 페이지 이동 개념이 아직 헷갈리는 경우
• react-navigation이 왜 필요한지 궁금한 경우

---

React Native에 네비게이션이 없는 이유

웹에서는 이런 흐름이 익숙하다.

• URL 변경
• 페이지 이동
• 뒤로 가기

하지만 React Native 앱은
단일 앱 프로세스 안에서 화면을 바꾸는 구조다.

그래서

• URL도 없고
• 페이지 개념도 없다

대신
**“현재 어떤 화면을 보여줄 것인가”**를
네비게이션이 관리한다.

[이미지: React Native 네비게이션 개념 구조]

---

react-navigation이란 무엇인가

react-navigation은
React Native에서 가장 널리 쓰이는 네비게이션 라이브러리다.

• 공식 문서가 잘 정리돼 있음
• 실무에서 가장 많이 사용됨
• 다양한 네비게이션 패턴 지원

이 블로그에서도
react-navigation 기준으로 설명한다.

---

네비게이션 종류 한 번에 정리

처음엔 종류가 많아 보이지만,
입문 단계에서는 딱 두 가지만 알면 된다.

Stack Navigation

• 화면을 쌓는 구조
• A → B → C
• 뒤로 가기 가능

Tab Navigation

• 하단 탭 구조
• 홈 / 검색 / 설정 같은 형태

[이미지: Stack Navigation과 Tab Navigation 구조 비교]

이번 글에서는
가장 기본인 Stack Navigation부터 다룬다.

---

react-navigation 설치하기

Expo 기준으로 설치한다.

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

Stack 네비게이션도 함께 설치한다.

npm install @react-navigation/native-stack

설치가 끝나면
이제 코드로 연결할 차례다.

---

NavigationContainer 설정

네비게이션의 최상위 컨테이너가 필요하다.

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

export default function App() {
  return (
    <NavigationContainer>
      {/* 화면들 */}
    </NavigationContainer>
  );
}

NavigationContainer는
앱 전체에서 딱 한 번만 감싼다.

---

Stack Navigator 기본 구조

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

const Stack = createNativeStackNavigator();

이제 화면을 등록한다.

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Detail" component={DetailScreen} />
  </Stack.Navigator>
</NavigationContainer>

여기서 중요한 건 두 가지다.

• name → 화면 이름
• component → 실제 화면 컴포넌트

---

화면 컴포넌트 예제

function HomeScreen({ navigation }) {
  return (
    <Pressable onPress={() => navigation.navigate('Detail')}>
      <Text>상세로 이동</Text>
    </Pressable>
  );
}

function DetailScreen() {
  return <Text>상세 화면</Text>;
}

• navigation.navigate('화면이름')
• 등록한 name과 정확히 일치해야 한다

---

navigation 객체는 어디서 오는가

Stack에 등록된 화면 컴포넌트에는
자동으로 props가 전달된다.

function Screen({ navigation, route }) {}

• navigation → 화면 이동 관련
• route → 전달된 파라미터 정보

입문 단계에서는
navigation.navigate만 기억해도 충분하다.

---

화면 이동 시 값 전달하기

navigation.navigate('Detail', {
  id: 1,
});

받는 쪽에서는 이렇게 사용한다.

function DetailScreen({ route }) {
  const { id } = route.params;

  return <Text>{id}</Text>;
}

이 패턴은
목록 → 상세 화면에서 아주 자주 쓰인다.

---

자주 겪는 실수들

실제로 처음 쓸 때
아래에서 많이 막힌다.

• NavigationContainer를 안 감쌈
• Screen name 오타
• navigate 했는데 화면이 안 바뀜
• Stack 설정 위치가 꼬임

이럴 때는
구조부터 다시 보는 게 제일 빠르다.

---

실무 기준으로 기억할 핵심 흐름

네비게이션은
“설정 → 등록 → 이동” 이 세 단계다.

1. NavigationContainer로 감싼다
2. Stack.Screen으로 화면을 등록한다
3. navigation.navigate로 이동한다

이 흐름만 이해하면
네비게이션의 70%는 끝이다.

---

정리

• React Native에는 기본 네비게이션이 없다
• react-navigation이 사실상 표준이다
• Stack Navigation이 가장 기본이다
• 화면 이동은 navigation.navigate로 처리한다

다음 글에서는
**하단 탭 구조(Tab Navigation)**를 추가해서
앱 구조를 한 단계 더 확장해볼 예정이다.