React Native에서 Routing: React Navigation 사용법

 리액트 네이티브는 네이티브 앱처럼 화면을 전환하고, 상태를 관리하기 위해 강력한 네비게이션 라이브러리가 필요하다. React Navigation은 이러한 요구를 충족시키는 가장 많이 사용되는 라이브러리 중 하나이다. 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 지원하며, 복잡한 앱 구조에서도 간단하고 효율적으로 화면 이동을 처리할 수 있다. 이 글에서는 react-navigation의 주요 기능과 사용 방법을 살펴보자.

React Navigation

 React Navigation은 리액트 네이티브에서 스크린 간의 전환과 상태 관리를 효율적으로 처리하기 위한 라이브러리이다. 이 라이브러리를 사용하면 여러 화면 사이에서 쉽게 이동할 수 있고, 스택 네비게이션, 탭 네비게이션, 드로어 네비게이션 등 다양한 네비게이션 방식을 구현할 수 있다.

설치 방법

 React Navigation을 설치하기 위해 기본 패키지와 몇 가지 추가 패키지를 설치해야 한다. 다음 명령어를 통해 설치할 수 있다. 설치 후에는 종속성 패키지인 react-native-screens와 react-native-safe-area-context도 설치해야 한다.

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

 또한 필요한 네비게이터마다 추가 패키지를 설치해야 한다. 예를 들어, 스택 네비게이터를 사용하려면 다음 명령어로 설치한다.

npm install @react-navigation/stack

기본 설정

 모든 네비게이터는 NavigationContainer로 감싸서 정의해야 한다. NavigationContainer는 네비게이션의 상태를 관리하고 화면 전환을 처리하는 컨테이너 역할을 한다.

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

function App() {
  return (
    <NavigationContainer>
      {/* 네비게이터를 여기에 추가 */}
    </NavigationContainer>
  );
}

export default App;

1. 스택 네비게이터 사용하기

 스택 네비게이터는 화면을 쌓아가며 전환하는 네비게이션 방식이다. 사용자는 이전 화면으로 돌아가거나 새로운 화면으로 이동할 수 있다.

스택 네비게이터를 설치한 후 아래와 같이 사용할 수 있다:

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="홈" component={HomeScreen} />
        <Stack.Screen name="상세" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 Stack.Navigator 안에 여러 개의 화면(Stack.Screen)을 정의하고, 각 화면을 이동할 수 있게 설정한다. initialRouteName은 첫 화면을 지정하는 속성이다.

화면 이동하기

 화면에서 다른 화면으로 이동하려면 navigation 객체를 사용하여 이동할 수 있다. 예를 들어, 홈 화면에서 상세 화면으로 이동하는 코드는 다음과 같다:

function HomeScreen({ navigation }) {
  return (
    <Button
      title="상세 화면으로 이동"
      onPress={() => navigation.navigate('상세')}
    />
  );
}

 navigation.navigate('상세')를 호출하면 '상세' 화면으로 전환된다.

파라미터 전달하기

 페이지 이동 시 파라미터를 함께 전달할 수 있다. 예를 들어, 특정 아이템의 ID나 기타 정보를 함께 전달하는 경우 다음과 같이 작성할 수 있다.

navigation.navigate('상세', { itemId: 42, otherParam: '추가 정보' });

 이동된 페이지에서는 route 객체를 통해 전달된 파라미터를 받을 수 있다.

function DetailsScreen({ route }) {
  const { itemId, otherParam } = route.params;
  return (
    <View>
      <Text>아이템 ID: {itemId}</Text>
      <Text>기타 파라미터: {otherParam}</Text>
    </View>
  );
}

2. 탭 네비게이터 사용하기

 탭 네비게이터는 화면 하단에 탭을 배치하여 여러 화면 사이를 쉽게 전환할 수 있게 도와준다. 주로 탭 기반의 네비게이션이 필요한 앱에서 사용된다.

npm install @react-navigation/bottom-tabs

3. 네스티드 네비게이터 사용하기

 복잡한 네비게이션 구조를 관리하기 위해 네스티드 네비게이터를 사용할 수 있다. 여러 네비게이터를 중첩시켜 다양한 화면 전환 구조를 만들 수 있다.

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={RootTabNavigator} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function RootTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="홈" component={HomeScreen} />
      <Tab.Screen name="설정" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

4. 헤더 커스터마이징

 화면 상단의 네비게이션 헤더는 기본적으로 제공되지만, 앱의 디자인에 맞춰 커스터마이징할 수 있다. 각 화면에 개별적으로 스타일을 적용하거나, 전체 화면에 공통으로 적용할 수 있다.

<Stack.Screen
  name="홈"
  component={HomeScreen}
  options={{
    title: '메인 화면',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
/>

 또한, 화면 내에서 navigation.setOptions를 사용하여 동적으로 헤더 옵션을 변경할 수 있다.

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          onPress={() => alert('정보 버튼 클릭')}
          title="정보"
          color="#fff"
        />
      ),
    });
  }, [navigation]);

  return (
    // 화면 내용
  );
}