리액트 네이티브 네비게이션: 하나의 화면에서 스택 네비게이션과 드로어 네비게이션 결합하기

@react-navigation/native의 CompositeNavigationProp을 활용하여 여러 네비게이션 프롭스를 결합할 수 있습니다. 이를 통해 타입스크립트가 네비게이션 타입을 정확하게 이해하고, 타입 안전성을 높여 잠재적인 오류를 방지할 수 있습니다.

1단계: 네비게이션 타입 정의

먼저, 스택 네비게이션과 드로어 네비게이션의 타입을 정의합니다.

import { CompositeNavigationProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { DrawerNavigationProp } from '@react-navigation/drawer';

type MapStackParamList = {
  // 여기서 스택 파라미터를 정의하세요
};

type MainDrawerParamList = {
  // 여기서 드로어 파라미터를 정의하세요
};

type Navigation = CompositeNavigationProp<
  StackNavigationProp<MapStackParamList>,
  DrawerNavigationProp<MainDrawerParamList>
>;

위 코드는 StackNavigationProp과 DrawerNavigationProp을 결합하여 새로운 네비게이션 타입인 Navigation을 만듭니다. 이를 통해 하나의 화면에서 두 개의 네비게이션 타입을 모두 사용할 수 있습니다.

2단계: 컴포넌트 내 사용

정의한 네비게이션 타입을 컴포넌트에서 사용합니다.

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

const HomeScreen: React.FC = () => {
  const navigation = useNavigation<Navigation>();

  return (
    <View>
      {/* 컴포넌트 코드 */}
      <Button
        title="지도 화면으로 이동"
        onPress={() => navigation.navigate('MapScreen')}
      />
      <Button
        title="드로어 열기"
        onPress={() => navigation.openDrawer()}
      />
    </View>
  );
};

위 코드에서

useNavigation<Navigation>()

을 사용하여 결합된 네비게이션 타입을 가져오고, 이를 통해 스택 네비게이션과 드로어 네비게이션의 메서드를 모두 사용할 수 있습니다.

이 방법을 사용하면 타입스크립트가 네비게이션 타입을 올바르게 추론할 수 있어서, 네비게이션 메서드 사용 시 오류를 방지할 수 있습니다. 이를 통해 네비게이션을 좀 더 타입 안전하게 사용할 수 있습니다.