69. 데이터의 렌더링 목록 map() 사용

JSX에서 동적인 구문을 실행하고 싶을 때 

{} 중괄호 안에서 작성한다 

map() 을 사용해서 <ExpenseItem />를 개수만큼 출력할 수 있다 

이미 아는 개념이라 가볍게 넘어감

 

아래 네 줄의 코드를 위의 한 줄로 간단하게 만들 수 있다

{props.items.map((expense) => <ExpenseItem title={expense.title} amount={expense.amount} date={expense.date} id={expense.id} />)}

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