React Navigation 타입스크립트 사용하기

React Native는 이제 타입스크립트를 사용하는 것이 기본 옵션이 되었다.

그에 따라서, 나 역시 타입스크립트를 사용하는데 react navigation의 타입스크립트 설정이 유난히 번거로웠다.

그래서 다음번의 번거로움을 줄이고자, 내가 사용해본 react navigation의 타입스크립트 설정을 기록으로 남겨두기로 했다.

🍖 코드들은 stack navigator를 기준으로 설명한다.

 

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Setting, Home, Login} from "./components";

export type RootStackParamList = {
  Login: undefined;
  Home: {
    setName: () => void;
  };
  Setting: {
    name: string;
  };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function LoginRoutes() {
  return (
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Setting" component={Setting} />
    </Stack.Navigator>
  );
}

export default LoginRoutes;

 

일단, 가장 먼저 네비게이터 생성자에 제네릭으로 각 페이지와 그에 해당되는 props에 대한 타입을 설정한다.

타입스크립트 설정을 하면, navigation에서 이동할 수 있는 스크린의 자동완성이 지원되므로 편하다.

만약 navigate가 되면서 props를 건네 받는 스크린이라면, 위의 Home이나 Setting과 같이 해당 props에 대한 타입을 설정할 수 있다.

 

import type {NativeStackScreenProps} from '@react-navigation/native-stack';

export type LoginHomeProps = NativeStackScreenProps<
  RootStackParamList,
  'Login'
>;

function Login({navigation, route}: LoginProps) {
   ...
}

각 스크린은 props로 navigation과 route를 갖는다.

이에 대한 타입스크립트 설정은 위와 같이 할 수 있다. 

네비게이터를 생성할 때 사용했던 RootStackParamList가 재사용되어 navigation.navigate나 route.params 등 내부에 값들에 대한 자동완성이 지원된다.

import {useNavigation, useRoute, RouteProp} from '@react-navigation/native';
import type {NativeStackNavigationProp} from '@react-navigation/native-stack';

export type HomeNavigationProps = NativeStackNavigationProp<
  RootStackParamList,
  'Home'
>;

type HomeRouteProps = {
  Home: {setName: () => void};
};

function Home() {
   const navigation = useNavigation<HomeNavigationProps>();
   const route = useRoute<RouteProp<HomeRouteProps, 'Home'>>();
   ...
}

useRoute나 useNavigation을 사용하며 타입스크립트를 적용할 땐 위와 같이 설정할 수 있다.

위에서는 stack navigation에 대해서만 다뤘지만.

만약 예를들어 BottomTabNavigation을 사용한다면,

import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';

와 같이 앞의 네비게이터 이름만 변형해서 유사하게 코드를 작성할 수 있다.

 

https://reactnavigation.org/docs/typescript/

https://reactnavigation.org/docs/typescript/