[React Native] props

React 목록

App.tsx

import React from 'react';
import {View, StyleSheet} from 'react-native';
import ChildScreen from './src/screens/ChildScreen';

const App = () => {
  const company = [
    {
      country: 'Korea',
      company: 'Samsung',
    },
    {
      country: 'USA',
      company: 'Apple',
    },
    {
      country: 'Japan',
      company: 'Sony',
    },
  ];

  // 자식으로부터 호출됨
  const onCalled = (param: string) => {
    console.log(param);
  };

  return (
    <View style={styles.container}>
      <ChildScreen company={company} onCalled={onCalled} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 100,
  },
});

 

ChildScreen.tsx

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

const ChildScreen = (props: any) => {
  console.log(props.company);

  return (
    <View>
      <Text>부모에게 받은 Props: {props.company[0].country}</Text>
      <Button
        title="부모 함수 호출"
        onPress={() => {
          props.onCalled('문안드려요.');
        }}
      />
    </View>
  );
};

export default ChildScreen;

 

React 목록