갓난애기도 배울 수 있는 React Native 가이드 ⑤ – 화면 전환과 Stack Navigator 도입하기

갓난애기도 배울 수 있는 React Native 가이드 ⑤ – 화면 전환과 Stack Navigator 도입하기

지금까지 우리는 단일 화면에서 입력, 버튼, 리스트 등을 구현해봤습니다.
하지만 실제 앱은 여러 화면을 오가며 동작하죠.
이번 글에서는 React Native에서 화면 전환(Navigation) 을 구현하는 대표 라이브러리인
React Navigation의 Stack Navigator를 도입하여
"할 일 목록 → 상세 화면"으로 전환되는 구조를 만들어 보겠습니다.

---

✅ 1. React Navigation이란?

React Native에는 기본 내비게이션 기능이 없기 때문에,
React Navigation이라는 외부 라이브러리를 사용합니다.

🚀 주요 기능

• Stack Navigator (화면 쌓기)
• Tab Navigator (하단 탭 메뉴)
• Drawer Navigator (사이드 메뉴)

---

✅ 2. 설치하기 (React Native CLI 기준)

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

※ Android/iOS 네이티브 설정은 위 명령어로 대부분 자동 처리됩니다.

---

✅ 3. 기본 구조 만들기

📁 디렉토리 구조 추천

/screens
  ├── HomeScreen.js
  └── DetailScreen.js
App.js

---

📄 App.js

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

import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '할 일 목록' }} />
        <Stack.Screen name="Detail" component={DetailScreen} options={{ title: '할 일 상세' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

📄 screens/HomeScreen.js

반응형

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

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24 }}>📝 오늘의 할 일</Text>
      <Button
        title="할 일 상세 보기"
        onPress={() =>
          navigation.navigate('Detail', {
            id: 1,
            title: 'React Native 공부하기',
          })
        }
      />
    </View>
  );
};

export default HomeScreen;

---

📄 screens/DetailScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const DetailScreen = ({ route }) => {
  const { id, title } = route.params;

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>할 일 번호: {id}</Text>
      <Text style={{ fontSize: 18, marginTop: 10 }}>제목: {title}</Text>
    </View>
  );
};

export default DetailScreen;

---

✅ 4. 데이터 전달 흐름 이해하기

항목 설명

navigation.navigate()	화면 전환 함수
route.params	이전 화면에서 전달된 데이터
name prop	각 스크린을 구분하는 키값

---

✅ 5. FlatList에서 화면 전환 연동하기 (예고)

다음 글에서는 실제 할 일 목록(FlatList)에서
각 아이템을 클릭하면 해당 상세 화면으로 이동하는 방식을 구현합니다.

onPress={() => navigation.navigate('Detail', { id: item.id, title: item.title })}

---

✅ 6. 이번 글에서 배운 것

• React Navigation Stack 설치 및 설정
• 여러 화면 구성하기
• navigation.navigate()를 사용한 화면 이동
• route.params로 데이터 전달 및 읽기
• 앱 구조를 모듈화하는 방식

---

📘 다음 글 예고

갓난애기도 배울 수 있는 React Native 가이드 ⑥ – FlatList와 상세 화면 연결하기 (실전 To-Do앱 연동)

실제 할 일 목록을 클릭해서 상세 정보를 확인하는 기능을 구현해보며,
지금까지 배운 기술을 하나로 연결합니다! ✨

---

 

React Native 화면 전환,React Navigation Stack 설치,React Native route params,React Native Stack.Navigator 예제,React Native Detail 화면,React Native 네비게이션,React Native Navigation 실습,React Native CLI Stack,React Native 컴포넌트 연결,React Native 앱 구조 설계