38. "props"를 통해 데이터 전달하기

 

자바스크립트 함수에서 매개변수를 사용해 다른 값을 받아서 출력하는 것처럼 
리액트에서도 매개변수를 사용하거나 props를 사용하여 같은 로직으로 아이템을 만들 수 있다

 

속성 대신에 props란 이름으로 불린다

데이터가 있는 파일에서 속성 props로 값을 전달한다

<ExpenseItem title={expenses[0].title} amount={expenses[0].amount.title} date={expenses[0].date} />

위와 같이 이름을 지정 (title, amount, date) 로 지정을 해서 ExpenseItem.js 에 보내면
ExpenseItem.js 에서 어떻게 받느냐?

//아래와 같이 
function ExpenseItem(props) 
//이렇게 받을 수 있다

그리고 꺼내 쓸 때 props.속성이름 과 같은 형식으로 가능 

또 props 대신 중괄호 안에 속성 이름들을 작성해서 바로 가져올 수도 있다

function ExpenseItems({title, amount, date})

 

import './ExpenseItem.css';

function ExpenseItem(props) {

  // data 객체 생성
  const expenseDate = props.date;
  const expenseTitle = props.title;
  const expenseAmount = props.amount;

  return (
    <div className="expense-item">
      <div>{expenseDate.toString()}</div>
      <div className="expense-item__description">
        <h2>{expenseTitle}</h2>
        <div className="expense-item__price">{expenseAmount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

위의 코드에서 const 변수들에 props.date를 할당할 필요도 없다

아래처럼 props를 바로 가져다 쓸 수 있기 때문이다

import './ExpenseItem.css';

function ExpenseItem(props) {

  return (
    <div className="expense-item">
      <div>{props.date.toString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">{props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

 

※ props 기능 

props는 리액트에서 컴포넌트를 재사용할 수 있게 하고 
컴포넌트에서 다른 컴포넌트로 데이터를 전달할 수 있게 하는 역할을 가지고 있다