React Navigation의 useNavigation타입하기

24.6.23자 수정

예시로 작성할 라우터 구조는 다음과 같다.

• RootRoute
  • MainRoute
    • Home
  • ChatRoute
  • AuthRoute
    • Email
    • Phone

예시 코드는 'Phone'에서 'Home'으로 간다고 가정한다.

/* MainRoute.tsx */
export type MainRouteParamList = {
  Home: undefined;
};

const Stack = createStackNavigator<MainRouteParamList>();

const MainRoute = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'Home'} component={HomeScreen} />
    </Stack.Navigator>
  );
}

/* AuthRoute.tsx */
export type AuthRouteParamList = {
  Email: undefined;
  Phone: undefined;
};

const Stack = createStackNavigator<AuthRouteParamList>();

const AuthRoute = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'Email'} component={EmailAuthScreen} />
      <Stack.Screen name={'Phone'} component={PhoneAuthScreen} />
    </Stack.Navigator>
  );
}

/* RootRoute.tsx */
export type RootRouteParamList = {
  MainRoute: NavigatorScreenParams<MainRouteParamList>;
  ChatRoute: NavigatorScreenParams<ChatRouteParamList>;
  AuthRoute: NavigatorScreenParams<AuthRouteParamList>;
};

const Stack = createStackNavigator<RootRouteParamList>();

const RootRoute = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={'MainRoute'} component={MainRoute} />
      <Stack.Screen name={'ChatRoute'} component={ChatRoute} />
      <Stack.Screen name={'AuthRoute'} component={AuthRoute} />
    </Stack.Navigator>
  );

예시의 RootRoute는 하위에 세 가지 Route가 중첩되어 있는 구조이다. 하위에 중첩된 Route가 있다면 NavigatorScreenParams을 사용해서 중첩 Route를 타입해준다.
각각의 라우터에서는 하위 스크린과 라우터에 대한 타입을 type 형식으로 해야 한다. interface는 안 된다. 위 예시에서의 RootRouteParamList, AuthRouteParamList 등이다. 이 타입을 활용해서 createStackNavigator() 메소드를 호출한다.

/* PhoneAuthScreen.tsx */
interface PhoneAuthProps
  extends StackScreenProps<AuthRouteParamList, 'Phone'> {}

const PhoneAuthScreen = ({ route }: PhoneAuthProps) => {
  const { navigation, route } =
    useNavigation<StackNavigationProps<MainRouteParamList>>();
  ...
  
  navigation.navigate('Home');
}

다뤄볼 상황은 Phone이 있는 AuthRoute에서 Home이 있는 MainRoute로 가는, 즉 형제 Router로 가는 상황이다. getParent() 메소드를 호출해서 부모 navigation에 접근해서 갈수도 있지만, useNavigation을 사용해서 갈수도 있다.

이 글을 수정하기 전에는 useNavigation에 CompositeNavigationProps를 사용하는 것으로 예시코드를 작성했었는데, 공식문서를 읽고 또 읽다보니 굳이 CompositeNavigationProps를 굳이 사용하지 않아도 된다는 것을 알게 되었다. 지금처럼 필요한 Route를 useNavigation 제네릭으로 할당하면 된다.

그럼 CompositeNavigationProps은 언제 사용할까? 대표적으로 Tab navigation 안에 중첩된 Stack navigation에서 Tab navigation의 메소드와 Stack navigation의 메소드를 모두 사용하고 싶을 때 사용한다. 즉, 위 예시처럼 단순히 Route 간 이동을 원하거나 특정 Route로 reset() 메소드를 사용하고 싶을 때는 위 예시처럼 CompositeNavigationProps를 사용하지 않아도 잘 작동한다.

React Navigation Type checking with TypeScript