[React Native] 컴포넌트, 스택 네비게이션 props 전달

chatGPT한테 props 전달 물어보고 있었는데 야물딱지게 대답해서 정리해보았다.

부모 -> 자식 컴포넌트 props 전달

부모 컴포넌트

import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  return (
    <View>
      <ChildComponent name="John" age={30} />
    </View>
  );
}

자식 컴포넌트

import React from 'react';
import { Text, View } from 'react-native';

export default function ChildComponent(props) {
  return (
    <View>
      <Text>Hello, my name is {props.name} and I am {props.age} years old.</Text>
    </View>
  );
}

또는 구조 분해 할당해서 다음과 같이 사용할 수도 있다

export default function ChildComponent({ name, age }) {
  return (
    <View>
      <Text>Hello, my name is {name} and I am {age} years old.</Text>
    </View>
  );
}

스택 네비게이션 간 props 전달

기본적인 스택 네비게이터의 형태

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

HomeScreen에서 DetailScreen로 props를 전달할 것이다
DetailScreen(송신)

function HomeScreen({ navigation }) {
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'Anything you want here',
          });
        }}
      />
    </View>
  );
}

DetailScreen(수신)

function DetailScreen({ route }) {
  const { itemId, otherParam } = route.params;

  return (
    <View>
      <Text>Item Id: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
}