41. 연습하기: 리액트 및 컴포넌트 기본 사항

과제

    <ExpenseItem title={expenses[0].title} amount={expenses[0].amount.title} date={expenses[0].date} id={expenses[0].id} />
    <ExpenseItem title={expenses[1].title} amount={expenses[1].amount.title} date={expenses[1].date} id={expenses[1].id} />
    <ExpenseItem title={expenses[2].title} amount={expenses[2].amount.title} date={expenses[2].date} id={expenses[2].id} />
    <ExpenseItem title={expenses[3].title} amount={expenses[3].amount.title} date={expenses[3].date} id={expenses[3].id} />

App.js에 존재하는 저 네가지 컴포넌트를 하나의 컴포넌트에 넣기 
그 과정에서 props를 전달하는 것이 필요하다

ExpenseItems.js

import ExpenseItem from "./ExpenseItem";
function ExpenseItems({ expenses }) {
  return <div className="expenses">
    <ExpenseItem title={expenses[0].title} amount={expenses[0].amount.title} date={expenses[0].date} id={expenses[0].id} />
    <ExpenseItem title={expenses[1].title} amount={expenses[1].amount.title} date={expenses[1].date} id={expenses[1].id} />
    <ExpenseItem title={expenses[2].title} amount={expenses[2].amount.title} date={expenses[2].date} id={expenses[2].id} />
    <ExpenseItem title={expenses[3].title} amount={expenses[3].amount.title} date={expenses[3].date} id={expenses[3].id} />
  </div>
}

export default ExpenseItems;