React Native: 다른 파일의 함수 이용 및 props

💡 예시

• 부모 컴포넌트에서 GoalItem.js의 함수를 이용

  // 부모 컴포넌트
  import GoalItem from "./components/GoalItem";

  return <GoalItem/>;

  // 자식 컴포넌트
  export default GoalItem;

💡 Props란?

• React와 React Native에서 사용되는 개념으로, 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하는 데 사용됨

// 부모 컴포넌트
import React from "react";
import { View, Text } from "react-native";
import ChildComponent from "./ChildComponent";

const ParentComponent = () => {
  const messageFromParent = "Hello from parent!";

  return (
    <View>
      {/* 부모가 속성을 통해 자식에게 데이터를 전달 */}
      <ChildComponent message={messageFromParent} />
    </View>
  );
};

// 자식 컴포넌트 (ChildComponent.js)
import React from "react";
import { Text } from "react-native";

const ChildComponent = (props) => {
  // props를 통해 전달받은 데이터 사용
  return <Text>{props.message}</Text>;
};

export default ChildComponent;

• props 객체는 부모 컴포넌트에서 전달한 모든 속성을 포함 -> 자식 컴포넌트에서 이를 참조하여 데이터를 가져옴
• 부모 컴포넌트의 <ChildComponent message={messageFromParent} />에서 ChildComponent는 자식 컴포넌트의 함수명이며, message는 임의로 지정한 변수명