react native -> props 란 무엇인가

현재 나는 개발중인 코틀린에 더불어서 react native에 흥미가 생겨 얼마 전부터 리액트네이티브에 대한 학습을 진행중이다. 공부에 시작하기에 앞서 javascript와 react의 핵심 구문들에 대해 학습을 먼저 시작 한 후 진행하였다.
학습하고, 복습하는차원에서 해당 블로그를 작성하게 되었다.
거두절미하고 본론으로 들어가보자

Props란 무엇인가?

React Native 를 사용하여 앱을 개발할 때, Component들간의 데이터 전달은 중요하다 이때 사용하는 것이 Props이다.
코틀린에선 intent를 통해 데이터를 전달하곤 했는데 내가 알고있는 native지식들과 연관지어 생각하며 공부를 진행해보니 흥미 있었다.

Props 는 Properties의 줄임말로, 부모 Component가 자식 Component에 데이터를 전달하기 위해 사용되는 읽기 전용 데이터이다. React Component는 재사용이 가능하고 독립적 UI단위를 만들기 위해 설계되었으며, props는 이런 Component가 동작하는데 필요한 데이터를 전달하는 수단이다.

Props 사용법

• 부모 Component에서 자식 Component로 데이터 전달

부모 Component에서 자식 Component로 props를 전달할땐, 자식 Component를 JSX에서 사용할때 속성처럼 전달한다.

// 예제
const ParentComponent = () => {
  return (
    <View>
      <Greeting name="John" />
    </View>
  );
};

export default ParentComponent;

• 자식 Component에서 props 접근

자식 Component에선 props 객체를 통해 전달된 데이터를 접근할 수 있다. 함수형 Component에선 매개변수로 'props'를 받거나 구조분해 할당을 사용할 수있다.

const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

export default Greeting;

// OR 구조분해 할당을 이용한 코드 작성 법
const Greeting = ({ name }) => {
  return <Text>Hello, {name}!</Text>;
};

Props 특징

• 읽기전용이다 : 자식 Component는 props를 수정할 수없다.
• 재사용성 : props를 사용하면 component들을 재사용성 높게 사용할 수 있다.

Props 활용 예제

1. 다양한 데이터 Type 전달하기

props는 문자열, 숫자, 불리언값, 배열 등 다양한 데이터 타입을 전달이 가능하다.

// 부모 Component
const ParentComponent = () => {
  const user = {
    name: 'Jinha',
    age: 27,
    location: 'Incheon'
  };

  return (
    <View>
      <UserCard user={user} />
    </View>
  );
};

export default ParentComponent;

//UserCard.js

const UserCard = ({ user }) => {
  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Age: {user.age}</Text>
      <Text>Location: {user.location}</Text>
    </View>
  );
};

export default UserCard;

component에서 props가 전달되지 않았을때 defaultProps를 사용하여 기본값을 설정 할 수있다.

Greeting.defaultProps = {
  name: 'Guest',
};