[React-Native + TypeScript] Stack Navigation, 스택 네비게이션 사용법

⚡ react-native의 네비게이션

---

화면에서 navigation을 이용하여 다른 화면으로 이동하곤 합니다.

 

react web에서는 말 그대로 URL을 통한 페이지 → 페이지 의 이동이었다면
앱에서는 스크린 간 이동이 아닌 자료구조의 스택과 같이 스크린을 쌓아갑니다.

 

스택 네비게이터는 화면 간 전환 및 탐색 기록을 관리할 수 있는 방법을 제공합니다.

 

이 뿐만 아니라 네이티브 어플에서 사용하던 일부 제스처와 애니메이션도 제공해 유용하게 사용할 수 있습니다.

 

그럼 약간은 복잡한 StackNavigation 설정 방법을 알아보겠습니다.

---

📌 라이브러리 설치

// 다음과 같은 환경에서 실행했습니다.
"react": "18.2.0",
"react-native": "0.71.8",

리액트 네이티브의 스택 네비게이션을 위해 다음과 같은 라이브러리를 설치해줍니다.

 

• navigation 라이브러리가 종속성을 갖고 있는 라이브러리 입니다.
  미설치하면 "RNSScreenStackHeaderConfig" was not found in the UIManager. 빌드 에러가 발생합니다.

$ npm install react-native-screens react-native-safe-area-context

 

• navigation관련 라이브러리 입니다.

$ npm install @react-navigation/native @react-navigation/native-stack

---

📌 NavigationContainer 설정

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from './src/screens/HomeScreen';
import { TestScreen } from './src/screens/TestScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Test" component={TestScreen} />
                {/* 추가 스크린은 여기에 계속해서 등록하면 됩니다. */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

🔎 NavigationContainer

NavigationContainer 은 탐색 트리를 관리하고 탐색 상태를 포함하는 구성 요소 입니다.

네비게이션 탐색과 관리를 위해 모든 네이게이터를 래핑해야 하기 때문에 이를 네비게이션 최상위에 감싸줍니다.

 

🔎 createNativeStackNavigator()

createNativeStackNavigator 는 Screen과 Navigator라는 객체를 반환하는 함수입니다.

 

• Screen
  • name
    네비게이션이 인식할 스크린의 이름입니다.
    대문자가 국롤입니다.
  • component
    작동할 컴포넌트를 넣어줍니다.
    ❗ () ⇒ <HomeComponent />와 같이 인라인 함수를 넣을 경우
    부모 컴포넌트 렌더링에 의해 모든 상태를 잃을 수 있습니다.
  • options
    화면 구성 요소에 관련된 여러 옵션을 지정할 수 있습니다. (애니메이션 등등)
• Navigator
  • initialRouteName
    초기에 띄워줄 스크린의 이름을 넣어줍니다.
    위에서 component가 아닌 name으로 설정한 부분을 넣어주어야 합니다.
  • screenOptions
    화면 구성 요소에 관련된 여러 옵션을 지정할 수 있습니다. (Header 등등)

---

📌 화면 간 이동

import { Button, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

export type RootStackParam = {
  Home: undefined;
  Test: undefined;
};

export const HomeScreen = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParam>>();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: 'black', fontSize: 30 }}>HomeScreen</Text>
      <Button 
        title="Go to TestScreen" 
        onPress={() => navigation.navigate('Test')} 
        />
    </View>
  );
};

 

🔎 RootStackParam

리액트 네이티브를 처음 시작할 때 이것 때문에 많이 헤맸습니다.

 

타입스크립트 환경에서 StackNavigation을 사용할 땐
어떤 스크린에 어떤 Props가 들어가는지 제네릭으로 알려주어야 합니다.

 

그래서 저는 RootStackParam이라고 이름 지은 것처럼
타입을 하나 생성해 다음과 같이 모든 스크린의 Props 정보를 네비게이션에 전달해줍니다.

type RootStackParam = { 스크린이름 : PropsType; }
useNavigation < NativeStackNavigationProp < RootStackParam > >

 

저는 직관적인 설명을 위해 스크린 내부에 타입을 정의해 두었지만
다음과 같이 타입을 부여한 useNavigation을 한번 커스텀 훅으로 래핑해도 괜찮을 것 같다고 생각합니다.

// useNavi.ts
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';

type RootStackParam = {
  Home: undefined;
  Test: undefined;
};

export const useNavi = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParam>>();
  return navigation;
};

// HomeScreen.tsx
export const HomeScreen = () => {
  const navigation = useNavi();

  return (...);
};

 

🔎 useNavigation()

useNavigation을 통해 사용할 수 있는 대표적인 기능은 다음과 같습니다.

• navigate('스크린명’)
  파라미터로 넣은 스크린으로 이동합니다.
  뒤로 가기를 한다면 이전 스크린으로 되돌아옵니다.
• push('스크린명’)
  현재 위치하는 스크린을 다시 불러올 경우 navigate 함수는 무시하지만
  push 함수는 계속해서 스크린을 쌓아 올립니다.
• goBack()
  말 그대로 뒤로가기 입니다.

---

그럼 리액트 네이티브의 네비게이션 기능을 잘 사용하시길 바라며
예제 외 다양한 옵션들을 따로 찾아보며 적용해보세요!