RN) React-Navigation에서 useRoute 개념 및 사용법

1. 스크린 이동하며 데이터를 같이 보내고 싶다면?

리액트 네이티브 상에서 페이지 이동할 때 useNavigation을 이용해야 된다.

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

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

  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate('Details') // navigation을 사용하여 이동
        }
      />
    </View>
  );
}

export default HomeScreen;

 

이때 웹개발자라면 페이지 이동 시 패러미터나 쿼리스트링을 이용하여 데이터를 주입하고 싶을 때가 있을 것이다.

리액트를 이용해봤으면 useSearchParams같은 훅이 리액트네이티브에도 있기를 기대할 것이다.

리액트 네이티브의 React-Navigation에도 당연히 이를 구현할 수 있는 훅이 따로 있다. 바로 useRoute이다.

 

2. useRoute훅을 이용하여 파라미터 추출하기

기본적으로 이게 전부다. 페이지 컴포넌트 최상단에서 useRoute를 사용하고 param들을 꺼내면 된다.

리액트의 useSearchParams와 거의 유사하지 않은가? 그러나 차이점이 하나 있는데,

바로 미리 타입들을 엄밀히 짜도록 강제한다는 점이다.

const route = useRoute()
const { param1, param2 } = route

 

내가 이동할 스택의 모든 라우트의 타입에서 어떤 라우트의 parameter를 가져올 건지를 정의해야한다.

이를 설정하는 방법을 아래에서 알아보겠다.

 

1. 스택네비게이터의 모든 pathname과 parameter들을 정리한 타입을 생성

나는 아래처럼 모든 라우트와 그 패러미터들의 타입을 정리하였다. (스택 별로 정리가 필요하다.)

// navigator.ts
export interface MainStackParamList extends ParamListBase {
  Login: {
    redirectTo?: string;
    replace?: boolean;
  };
  BottomTab: undefined;
  Detail: ItemType;
  SignUp: undefined;
  FindPassword: undefined;
  FindUsername: undefined;
  Webview: {
    url: string;
    title: string;
  };
}

 

 

2. 원하는 페이지 내에 routeProp 타입 생성

useRoute에 제공할 RouteProp을 생성해야한다. RouteProp은 두 개의 인자를 받게 되는데, (RouteProp<T, V>)

첫 번째 인자로 위에서 생성해놨던 해당페이지가 존재하는 스택네비게이터 타입을 제공하고,

두 번째 인자로 그 중 어떤 페이지의 key값을 가져올 건지를 설정하면 된다.

import { type MainStackParamList } from "types/navigator";
import { useRoute, RouteProp, useNavigation } from "@react-navigation/native";

type WebviewRouteProp = RouteProp<MainStackParamList, "Webview">;

 

그 후 useRoute를 실행하여 변수에 할당해주고

이곳에서 지정해놓은 param들을 꺼내쓰면 된다. 끝!

  const route = useRoute<WebviewRouteProp>(); // useRoute 설정
  const { url, title } = route.params;

 

전체 코드

import { type MainStackParamList } from "types/navigator";
import { useRoute, RouteProp, useNavigation } from "@react-navigation/native";

type WebviewRouteProp = RouteProp<MainStackParamList, "Webview">;

const WebViewContainer = () => {
  const route = useRoute<WebviewRouteProp>(); // useRoute 설정
  const { url, title } = route.params;
  // ...
  
    return (
    <SafeAreaView style={styles.container}>
      <WebView
        onLoadStart={() => setLoading(true)}
        onLoadEnd={() => setLoading(false)}
        onLoadProgress={({ nativeEvent }) => {
          console.log("Loading progress:", nativeEvent.progress);
        }}
        source={{ uri: url }}
        style={{ flex: 1 }}
      />
    // ...
  )    
}