📌 React Navigation - CompositeNavigationProp 가이드 🚀

들어가며

React Navigation을 사용하다 보면 여러 개의 네비게이션 타입을 함께 사용해야 하는 상황이 생길 수 있습니다.
예를 들어, Stack Navigation과 Drawer Navigation을 동시에 사용하는 경우 같은 상황입니다.

이때 유용한 타입이 CompositeNavigationProp
이 글에서는 CompositeNavigationProp의 개념과 사용법을 쉽게 정리해보았습니다.

1️⃣ CompositeNavigationProp란?

CompositeNavigationProp은 두 개의 네비게이션 타입을 조합해서 하나의 navigation 객체에서 사용할 수 있도록 해주는 유틸리티 타입입니다.

📌 왜 필요할까?
React Navigation에서는 화면을 이동할 때 navigation.navigate()를 사용하는데, 각 네비게이션 타입마다 navigate 메서드가 다를 수 있습니다..
예를 들어, StackNavigationProp에는 openDrawer()가 없고, DrawerNavigationProp에는 goBack()이 없을 수도 있습니다.

➡️ 그래서 두 개의 네비게이션 타입을 합쳐서 하나의 navigation 객체에서 모든 기능을 사용할 수 있도록 만드는 게 CompositeNavigationProp입니다.

2️⃣ 기본 사용법

📍 예제 상황

• Stack Navigation: 로그인, 회원가입, 메인 화면을 관리
• Drawer Navigation: 설정 화면을 관리

➡️ 홈 화면에서 Stack과 Drawer의 기능을 모두 사용하고 싶다면?
CompositeNavigationProp을 활용하면 됩니다! 🚀

✅ 1. 네비게이션 타입 정의

먼저, Stack과 Drawer 네비게이션을 정의:

import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { DrawerNavigationProp } from "@react-navigation/drawer";
import { CompositeNavigationProp } from "@react-navigation/native";

// Stack Navigation 타입 정의
type RootStackParamList = {
  Home: undefined;
  Details: { id: number };
};

// Drawer Navigation 타입 정의
type DrawerParamList = {
  Main: undefined;
  Settings: undefined;
};

✅ 2. CompositeNavigationProp 사용하기

Stack과 Drawer 네비게이션을 함께 사용할 수 있도록 CompositeNavigationProp을 적용:

import { useNavigation } from "@react-navigation/native";

// 🟢 두 개의 네비게이션 타입을 조합!
type HomeScreenNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<RootStackParamList, "Home">,
  DrawerNavigationProp<DrawerParamList>
>;

const HomeScreen = () => {
  const navigation = useNavigation<HomeScreenNavigationProp>();

  return (
    <View>
      {/* Stack Navigation 기능 사용 */}
      <Button title="Go to Details" onPress={() => navigation.navigate("Details", { id: 1 })} />
      
      {/* Drawer Navigation 기능 사용 */}
      <Button title="Open Drawer" onPress={() => navigation.openDrawer()} />
    </View>
  );
};

📌 useNavigation<HomeScreenNavigationProp>()을 사용하면 navigation.navigate()와 navigation.openDrawer()를 한 곳에서 모두 사용할 수 있습니다! 🎉

3️⃣ 언제 사용할까?

✅ Stack, Drawer, Bottom Tab을 동시에 사용하는 경우
✅ 특정 화면에서 여러 개의 네비게이션 기능을 함께 사용해야 할 때
✅ navigation.navigate()를 사용할 때 타입 충돌을 방지하고 싶을 때

4️⃣ 실수하기 쉬운 부분

❌ 쉼표(,)를 빼먹으면 안 됨!

// ❌ 오류 발생 (쉼표 빠짐)
type MyPageNavigationProp = CompositeNavigationProp<
  StackNavigationProp<RootStackParamList, "Start">
  StackNavigationProp<MyPageStackParamList>
>;

✅ 올바른 코드 (쉼표 추가!)

type MyPageNavigationProp = CompositeNavigationProp<
  StackNavigationProp<RootStackParamList, "Start">,
  StackNavigationProp<MyPageStackParamList>
>;

➡️ 제네릭 타입을 여러 개 사용할 때는 반드시 쉼표(,)를 넣어야 한다!

📌 마무리

이제 CompositeNavigationProp을 활용해서 여러 개의 네비게이션을 조합하는 방법을 알아보았습니다! 🚀
React Navigation을 사용할 때 Stack, Drawer, Tab 등을 유연하게 결합하고 싶다면 CompositeNavigationProp을 적극 활용하면 됩니다! 🙌