Published on

React Native 3단계: 네비게이션과 화면 이동

[3단계] React Native 네비게이션과 화면 이동

1. react-navigation 설치하기

리액트 네이티브는 웹처럼 URL이 없기 때문에, 별도 네비게이션 라이브러리가 필요해.

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

기본 구조: Stack Navigator 사용

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
  • 화면 이동: navigation.navigate('Detail')
  • 뒤로가기 자동 처리됨

2. Stack, Tab, Drawer 구조 이해

Stack Navigator

  • 화면이 쌓이는 구조
  • 예: 홈 → 상세 → 설정 → 뒤로가기

Bottom Tab Navigator

npm install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

<Tab.Navigator>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
  • 하단 탭 네비게이션 제공
  • 아이콘, 색상 변경 가능

Drawer Navigator

npm install @react-navigation/drawer
  • 햄버거 메뉴 형식의 슬라이딩 메뉴 (왼쪽에서 당기기)
  • 사이드바 메뉴 느낌

3. 네비게이션 파라미터 전달과 수신

화면 전환 시 데이터 전달

navigation.navigate('Detail', { userId: 5 });

수신

const route = useRoute();
const { userId } = route.params;

또는

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

4. Header 커스터마이징

  • 각 화면마다 타이틀이나 버튼 변경 가능
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{ title: '상세 보기', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } }}
/>
  • 버튼 추가도 가능: headerRight, headerLeft

5. 뒤로가기, 초기화, 리셋 등 고급 이동

navigation.goBack();         // 뒤로 가기  
navigation.replace('Login'); // 현재 페이지 대체  
navigation.reset({ index: 0, routes: [{ name: 'Home' }] }); // 스택 초기화

요약

  • react-navigation은 리액트 네이티브에서 화면 이동을 위한 표준
  • Stack, Tab, Drawer로 UI 구조를 다양하게 구성 가능
  • 각 화면 간 데이터 전달도 손쉽게 가능
  • 커스터마이징이 자유롭고, 웹보다 더 직관적인 설계 가능

심화학습

Q1. Stack, Tab, Drawer를 동시에 쓸 수 있나요? 어떻게 구조를 짜야 하나요?
A1. 가능하다. 보통 최상단에 Tab, 그 내부 화면마다 Stack, 그리고 특정 섹션만 Drawer를 중첩해서 쓴다. 중첩 네비게이터 구조를 만들면 된다.

Q2. replace()와 navigate()의 차이는 뭔가요?
A2. navigate()는 스택에 화면을 추가해서 뒤로가기가 가능하지만, replace()는 현재 화면을 덮어써서 뒤로가기가 안 된다. 로그인 이후 메인으로 갈 때 주로 사용된다.

Q3. 화면 전환 시 파라미터가 없거나 잘못된 값이면 앱이 죽지 않게 처리하려면?
A3. route.params?.userId || defaultValue 같이 옵셔널 체이닝을 쓰거나, useEffect에서 유효성 검사를 한 뒤 오류 시 경고/뒤로가기로 처리하는 게 좋다.