๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“ฑ Cross Platform/React Native

[React Native] useNavigation์™€ useRoute ์ด์šฉํ•ด์„œ ํ™”๋ฉด ์ด๋™ํ•˜๊ณ  ๋ฐ์ดํ„ฐ ์ „๋‹ฌํ•˜๊ธฐ (Move and Pass data between two screens using Hooks)

by Fomagran ๐Ÿ’ป 2022. 8. 12.
728x90
๋ฐ˜์‘ํ˜•

์•ˆ๋…•ํ•˜์„ธ์š” Foma ์ž…๋‹ˆ๋‹ค.

 

ํ‰์†Œ์— ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ navigation์„ props๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๋ถˆํŽธํ–ˆ๋Š”๋ฐ์š”.

 

์˜ค๋Š˜์€ React-Native์—์„œ navigation์„ props๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, useNavigation๊ณผ useRoute๋ฅผ ๋งŒ๋“ค์–ด ์ค˜์„œ

 

ํ™”๋ฉด์„ ์ด๋™๊ณผ ํ•จ๊ป˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๋ฐ›์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


Install

 

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install @react-navigation/stack
npm install react-native-safe-area-context

Navigation

 

Navigation/index.ts

 

๊ธฐ์กด Props์™€ ๊ฐ™์ด Navigation์„ ๊ตฌ์„ฑํ•ด ์ค€๋‹ค.

 

const Stack = createNativeStackNavigator();

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={screens.Login}>
        <Stack.Screen name={screens.Login} component={LoginScreen} />
        <Stack.Screen
          name={screens.ChatRoom}
          component={ChatRoomScreen}
        />
        <Stack.Screen name={screens.Chat} component={ChatScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

๋‹ค๋งŒ ์ถ”๊ฐ€ํ•ด ์ค˜์•ผ ํ•  ๋ถ€๋ถ„์€ RootStackParamList์ธ๋ฐ ,

 

๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š” ํ™”๋ฉด์— navigate ๋  ๋•Œ ์–ด๋–ค ๊ฐ’๋“ค์„ ๋„˜๊ฒจ์ค„ ๊ฒƒ์ธ์ง€ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

 

export type RootStackParamList = {
  LoginScreen: undefined;
  ChatRoomScreen: undefined;
  ChatScreen: {room: string};
};

ChatRoomScreen.tsx

 

useNavigation, StackNavigationProp, RootStackParamList๋ฅผ import ํ•ด์ค๋‹ˆ๋‹ค.

 

import {useNavigation} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../Navigation';

 

๊ทธ ๋‹ค์Œ ์•„๋ž˜์™€ ๊ฐ™์ด navigation์„ useNaviation์œผ๋กœ ๋งŒ๋“ค์–ด ์ฃผ๋Š”๋ฐ์š”.

 

๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด StackNavigationProp์€ Naviation์— ์žˆ๋Š” Prop๋“ค์„ ์ •์˜ํ•˜๋Š”๊ฑด๋ฐ, ๊ทธ๊ฒƒ์„ ์œ„์—์„œ ๋งŒ๋“ค์–ด์ค€ RootStackParamList๋กœ ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

 

  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

 

์ฑ—๋ฃธ ์Šคํฌ๋ฆฐ์—์„œ ์ฑ— ์Šคํฌ๋ฆฐ์œผ๋กœ ์ด๋™ํ•  ๋•Œ ๋ฐฉ ์ •๋ณด๋ฅผ ํ•จ๊ป˜ ๋„˜๊ฒจ์ฃผ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์œ„์—์„œ ์ •์˜ํ•ด์ค€๋Œ€๋กœ "ChatScreen" (ํ™”๋ฉด ์ด๋ฆ„)๊ณผ ๋„˜๊ฒจ์ค„ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•ด ์ค๋‹ˆ๋‹ค.

 

          <Pressable
            onPress={() => {
              navigation.navigate("ChatScreen", {room: 'A'});
            }}>

 

๋งŒ์•ฝ ์œ„์—์„œ ์ •์˜ํ•˜์ง€ ์•Š์€ ํ™”๋ฉด ์ด๋ฆ„์ด๋‚˜ prop์„ ์ ๊ฒŒ ๋˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

 


ChatScreen.tsx

 

RouteProp๊ณผ useRoute๋ฅผ import ํ•ด์ค๋‹ˆ๋‹ค.

 

import {RouteProp, useRoute} from '@react-navigation/native';

 

๊ทธ ๋‹ค์Œ ์•„๋ž˜์™€ ๊ฐ™์ด route๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๋Š”๋ฐ์š”.

 

RouteProp์€ RootStackParamList์˜ "ChatSceen"(param ๋ฐ›์•„์˜ฌ ํ™”๋ฉด)์œผ๋กœ ๊ตฌ์„ฑํ•ด ์ค๋‹ˆ๋‹ค.

 

์—ฌ๊ธฐ์„œ๋„ ์œ„์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ RootStackParamList์— ์žˆ์ง€ ์•Š์€ ํ™”๋ฉด์„ ์ง€์ •ํ•ด ์ฃผ๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

 

  const route = useRoute<RouteProp<RootStackParamList, "ChatScreen">>();

 

์•„๋ž˜์™€ ๊ฐ™์ด type์œผ๋กœ ๋‚˜๋ˆ ์„œ ์ง€์ •ํ•ด ์ค˜๋„ ๋ฉ๋‹ˆ๋‹ค.

 

type ScreenRouteProp = RouteProp<RootStackParamList,"ChatScreen">;
const route = useRoute<ScreenRouteProp>();

 

๊ทธ ๋‹ค์Œ route์˜ params์— ๋ฐ›์•„์˜ฌ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด 

 

  console.log(route.params?.room);

 

์•„๋ž˜์™€ ๊ฐ™์ด ์ •์ƒ์ ์œผ๋กœ ์ž˜ ์ „๋‹ฌ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 


๋Š๋‚€ ์ 

 

React-native๋กœ ํ™”๋ฉด ์ด๋™ํ•  ๋•Œ ํ•ญ์ƒ navigation prop์„ ๋„˜๊ฒจ์ฃผ๊ณ  ๋ฐ›๊ณ  ํ–ˆ๋Š”๋ฐ,

 

์ด๊ฒŒ ํ™”๋ฉด์ด ๋งŽ์•„์ง€๋ฉด ๋งŽ์•„ ์งˆ์ˆ˜๋ก ๊ณ„์†ํ•ด์„œ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ „๋‹ฌํ•ด์•ผ ํ–ˆ๋‹ค.

 

๊ทธ๋ž˜์„œ ๋ญ ์ƒํƒœ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒŒ ์—†์„๊นŒ ํ•˜๊ณ  ์ฐพ์•„๋ดค๋”๋‹ˆ useNavigation๊ณผ useRoute๊ฐ€ ์žˆ์—ˆ๋‹ค.

 

ํ™•์‹คํžˆ ํ™”๋ฉด ๊ฐ„์— ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ „๋‹ฌํ•  ๊ฒŒ ์—†์–ด์„œ ๋” ๊น”๋”ํ•ด์ ธ์„œ ์†์ด ์‹œ์›ํ–ˆ๋Š”๋ฐ,

 

iOS์—์„œ ํ™”๋ฉด ์ด๋™ํ•˜๋Š” ๊ฑฐ์— ๋น„ํ•ด ๋ญ ์„ธํŒ…ํ•ด์ค˜์•ผ ํ•  ๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์•„์„œ ์—„์ฒญ ๋ณต์žกํ•˜๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค..

 

 

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€