[RN] route params 알아보기

https://reactnavigation.org/docs/params/ 

Passing parameters to routes | React Navigation

리액트 네이티브에서는 navigation 기능을 사용하여 페이지를 이동하면서 데이터를 함께 전달시킬 수 있다. 

이때 전달되는 데이터를 'route parmas' 라고 한다. 

이 부분을 공식문서를 보면서 함께 이해해보자!!!

 

 

흠 잠시만~~~~~  파라미터란? 
한국어로는 매개변수라고 한다.
-매개변수란 변수의 특별한 한종류인데 함수등과 같은 서브루틴의 인풋으로 제공되는 여러 데이터 중 하나를 가리킨다. 

-매개변수의 목록은 서브루틴의 정의 부분에 포함되며,
-매번 서브루틴이 호출될 때 마다 해당 호출에서 사용된 전달인자들을 각각에 해당하는 매개변수에 대입시켜 준다.
-파라미터는 함수를 정의할 때, 함수가 필요한 데이터를 외부로부터 받을 수 있도록 지정하는 변수

즉 쉽게 말해서...전달인자는 실제로 함수! 루틴에 전달되는 값이고 매개변수는 함수의 내부에서 해당 함수로 전달된 값을 가리키는 변수를 의미한다. 

더 쉽게 말해보자
매개변수는 프로그래밍에서 함수나 메서드가 작업을 수행하는 데 필요한 정보를 전달받기 위해 사용하는 변수이다. 
계산기를 예로들어보자. 함수는 계산기 그 자체이고 매개변수는 계산기에 입력하는 숫자이다.
계산기에서 더하기를 할 때, 두개의 숫자(매개변수) 를 입력해서 함수에서 그 합을 계산하게 되는 것이다. 

 

2. 리액트네이티브에서의 파라미터 사용

const handlePress = (hilong) => {
  console.log('Button pressed', hilong);
};

<Button onPress={handlePress} title="Press me" />

이런 예시가 있다고 가정하자.
handlePress 함수는 hilong 이라는 파라미터를 받는다.
버튼이 클릭되면 handlePress 함수가 실행되고 클릭 이벤트에 대한 정보가 hilong 파라미터로 전달이 되게 된다. 

 

2. route params 기본 개념 

 React Navigation에서 화면 간에 데이터를 전달할 때 사용하는 객체이다.

이 객체는 화면 이동 시 전달(receive)된 매개변수를 포함한다.

만약 navigation.navigate 와 함께 사용하면 데이터를 전달해주는 송신(send) 역할도 할 수 있다. 

 

=> route.params 는 현재 화면으로 전달된 매개변수를 포함한다. 이동된 화면에서 전달된 매개변수를 받기 위한 객체이다.

=> navigation.navgate 메서드를 사용하여 다른 화면으로 이동할 때 매개변수를 전달할 수 있다. 

 

3. 예시코드와 함께 이해하기

//HomeScreen
import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

 

 

// DetailScreen

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

이 이미지를 보면 Home 에서 저장한 'oneParam: anything you want here' 이라는 멘트가 그대로 전달되어 detail screen 에 렌더링된 것을 볼 수 있다. 

 

<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>

 

이 부분 때문에!

이걸 사용하여 프로필 수정 을 만들어보고자 한다...

그건 다음에 포스팅...