React Native에서 화면 전환 구현하기 🚀

1. React Navigation이란?

React Native에서 여러 개의 화면을 이동하는 기능을 구현하려면 React Navigation 라이브러리를 사용해야 합니다.

처음 React Native를 공부할 때, 저는 화면 이동을 window.location.href처럼 단순하게 하면 되지 않을까 생각했어요. 하지만, React Native는 웹이 아니라 모바일 앱이기 때문에 네이티브 스타일의 네비게이션을 구현해야 했죠.

 

📌 React Navigation은 다음과 같은 장점을 가집니다.
✅ 네이티브 앱과 유사한 화면 전환 효과 제공
✅ Stack, Tab, Drawer 등 다양한 내비게이션 방식 지원
✅ iOS & Android에서 동일한 방식으로 작동

 

React Native 공식 문서에서도 React Navigation을 가장 일반적인 화면 이동 방법으로 추천하고 있습니다.
📌 React Navigation 공식 사이트

---

2. React Navigation 설치 및 설정

📌 React Navigation을 사용하려면 먼저 라이브러리를 설치해야 합니다.
아래 명령어를 실행하세요.

 

npm install @react-navigation/native 
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

 

설치 후, 추가 설정이 필요합니다. babel.config.js 파일을 수정해 react-native-reanimated를 활성화하세요.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

처음에 react-native-reanimated를 설치하지 않으니 앱이 실행되지 않더라구요.
"Animated: useNativeDriver is not supported" 같은 오류가 발생하면 react-native-reanimated 플러그인이 등록되지 않은 경우일 가능성이 높아요.

 

이제 모든 설정이 끝났으니 화면 전환을 구현해봅시다! 🚀

---

3. Stack Navigation 구현하기 (기본 화면 이동)

📌 Stack Navigation은 모바일 앱에서 가장 기본적인 화면 전환 방식입니다.
뒤로 가기 버튼이 자동으로 추가되며, 화면을 쌓아 올리는 구조로 동작합니다.

📌 예제 코드: Stack Navigation 구현

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

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>홈 화면</Text>
      <Button title="상세 화면으로 이동" onPress={() => navigation.navigate('Details')} />
    </View>
  );
};

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>상세 화면</Text>
      <Button title="홈으로 돌아가기" onPress={() => navigation.goBack()} />
    </View>
  );
};

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

📌 코드 설명

• createNativeStackNavigator() → 스택 네비게이션 생성
• navigation.navigate('Details') → "상세 화면"으로 이동
• navigation.goBack() → 이전 화면으로 돌아가기

실행하면 "홈 화면"에서 버튼을 누르면 "상세 화면"으로 이동하고, 다시 홈 화면으로 돌아올 수 있습니다.

처음 구현할 때 NavigationContainer를 생략하니 화면이 이동하지 않더라구요.
NavigationContainer를 반드시 감싸줘야 정상적으로 동작합니다!

---

4. Tab Navigation 구현하기 (하단 탭 이동)

📌 Tab Navigation은 하단 탭 메뉴를 사용하여 화면을 전환하는 방식입니다.

📌 예제 코드: Tab Navigation 구현

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>홈 화면</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>설정 화면</Text>
  </View>
);

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

📌 코드 설명

• createBottomTabNavigator() → 하단 탭 네비게이션 생성
• Tab.Screen을 추가하여 원하는 화면을 설정

실행하면 화면 하단에 "홈"과 "설정" 탭이 생성되고, 탭을 눌러 화면을 전환할 수 있습니다.

---

5. 정리 및 다음 단계

✅ React Navigation이 필요한 이유 이해
✅ Stack Navigation을 사용한 기본 화면 이동 구현
✅ Tab Navigation을 활용한 하단 메뉴 이동 구현
✅ 네비게이션 설정 시 주의할 점

 

📌 다음 글 예고: React Native에서 리스트뷰 구현하기 (FlatList, ScrollView)

📌 앞으로 다룰 내용

• Drawer Navigation (사이드 메뉴)
• 네비게이션을 활용한 데이터 전달
• 화면 전환 애니메이션 적용

React Native를 배우고 싶다면, 이 블로그를 통해 함께 성장해 보세요! 🚀
궁금한 점이 있다면 언제든 댓글로 남겨주세요. 😊

---

📌 출처 및 참고 자료

• React Navigation 공식 문서
• React Native 공식 문서