Eojin Han

Propertes의 축약어.

Props는 React Components를 커스텀 할 수 있게 한다.

Cat Component의 이름을 다르게 전달하고 싶다면 props로 name을 전달하면 됨.


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

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

export default Cafe;

대부분의 React Native의 Core Components는 props로 커스터마이징 가능하다.

⇒ 어떤 props가 있는지 도큐먼트를 참조하여 사용하자.

예를 들어 Image Component에는 대표적으로 props로 source와 style 등을 가진다.

Image Component Props : https://reactnative.dev/docs/image#props


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

const CatApp = () => {
  return (
    <View>
      <Image
				{//props로 별도 설정값 전달 -- 함수로 치면 인자라고 생각해라}
        source={{uri: "https://reactnative.dev/docs/assets/p_cat1.png"}}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
}

export default CatApp;

중괄호 두번?? (JS Object 사용 시)

추가설명 : {{ width:200, height:200 }}을 보면 중괄호를 2번 쓰고 있다.

JSX에서 살펴봤듯이, JSX element 안에서 자바스크립트 구문을 사용하려면 {} 중괄호 안에 적었다.

하지만 JS Objects 또한 {}중괄호로 묶어줘야하므로, JSX에서 JS object를 전달하려면 중괄호를 두번 써야함.

각종 React Component에 props를 통해서 값을 다르게 설정할 수 있다.

하지만 상호작용하면서 값이 변화해야한다면 props 대신 State를 사용해야 한다.

State