온라인 강의/React 완벽 가이드 [Udemy]

과제 1: 연습해봅시다: React & 컴포넌트 기초

유호야 2023. 6. 1. 22:27
반응형

영상에 나오는 문제를 풀어보세요.

상세 설명:

  • 지출 표시를 담당하는 새 컴포넌트를 생성하세요.
  • 해당 컴포넌트에 여러 개의 ExpenseItem 컴포넌트를 추가하세요.
  • 앱 컴포넌트에 지출 데이터를 그대로 유지하면서 해당 데이터를 새로 생성한 컴포넌트로 전달하세요.

Expenses 컴포넌트를 스타일링할 때 다음 링크에 있는 .css 파일을 사용하실 수 있습니다. (https://github.com/academind/react-complete-guide-code/blob/03-react-basics-working-with-components/extra-files/Expenses.css)

이 과제에 대한 질문

여러분의 솔루션을 공유해주세요.

 

이거랑 별개로 궁금한 점

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

{expenses.forEach((ex, i) => {
	<ExpenseItem title={expenses[i].title} amount={expenses[i].amount.title} date={expenses[i].date} />
})}

위처럼 반복 되는 코드를 forEach문 사용해서 반복시킬 수 없나?

 

반응형