[React] 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달하기(props)

App.js의 데이터를 props를 이용해 하위 컴포넌트에 전달한다.

props를 사용함으로써 컴포넌트의 재사용성을 높일 수 있다.

 

props 전달 방법 3가지

1. 기본 사용법

App.js

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

ExpenseItem.js

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

⏏️ props: 상위 컴포넌트에서 내려주는 데이터. 객체 형식으로 되어 있다.

 

2. 비구조화 할당을 이용한 props 전달받기

😊 비구조화 할당: 객체에서 값을 추출하는 문법 (React 문법이 아님. JS 문법)

 

ExpenseItem.js

function ExpenseItem({title, amount, date}) {
  return (
    <div className="expense-item">
      <div>{date.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{title}</h2>
        <div className="expense-item__price">${amount}</div>
      </div>
    </div>
  );
}

 

3. 다른 방식으로 Props 주고받기 (배열 내 객체 전체를 props로 전달)

App.js

<ExpenseItem expense={expense[0]} />

ExpenseItem.js

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

 

 

📒 props를 전달받는 방법은 개인의 선택이다.

 

---

http://tinyurl.com/29cjtug7

props를 통해 데이터 전달하기 · Yoonyesol/React-study@6587446