Props에 대해

 

props는 React와 React Native에서 컴포넌트 간에 데이터를 전달하기 위한 매개체입니다. props는 **"properties"**의 줄임말로,

부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터나 메서드입니다.

 

props의 기본 개념

1. 부모에서 자식으로 전달
   • 부모 컴포넌트는 자식 컴포넌트에 데이터를 전달할 때 props를 사용합니다.
   • 자식 컴포넌트는 전달받은 props를 읽기 전용으로 사용할 수 있으며, props의 값을 직접 수정할 수는 없습니다.
2. 데이터의 일관성 유지
   • props는 React의 단방향 데이터 흐름을 유지하는 중요한 개념입니다. 부모에서 자식으로 데이터가 흐르며, 자식 컴포넌트는 props를 변경하지 않고 오직 읽기만 합니다.
3. 사용 예시
   예를 들어, App 컴포넌트가 Greeting이라는 자식 컴포넌트에 name이라는 props를 전달한다고 가정

// App.js
import React from 'react';
import { View, Text } from 'react-native';
import Greeting from './Greeting';

export default function App() {
  return (
    <View>
      {/* name이라는 props를 전달합니다 */}
      <Greeting name="Gildong" />
    </View>
  );
}


// Greeting.js
import React from 'react';
import { Text } from 'react-native';

export default function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

 

위 코드에서 App 컴포넌트는 Greeting 컴포넌트에 name="Gildong"이라는 값을 props로 전달
Greeting 컴포넌트는 props.name을 통해 전달된 name 값을 읽고, 화면에 Hello, Gildong!이라는 텍스트를 표시

 

this.props 사용

클래스 컴포넌트에서는 this.props로 props에 접근할 수 있습니다. 

class Greeting extends React.Component {
  render() {
    return <Text>Hello, {this.props.name}!</Text>;
  }
}