반응형
영상에 나오는 문제를 풀어보세요.
상세 설명:
- 지출 표시를 담당하는 새 컴포넌트를 생성하세요.
- 해당 컴포넌트에 여러 개의 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문 사용해서 반복시킬 수 없나?
반응형
'온라인 강의 > React 완벽 가이드 [Udemy]' 카테고리의 다른 글
42. 연습하기: 리액트 및 컴포넌트 기본 사항 (정답) (0) | 2023.06.02 |
---|---|
41. 연습하기: 리액트 및 컴포넌트 기본 사항 (0) | 2023.06.02 |
40. 컴포넌트를 여러 컴포넌트로 분할하기 (0) | 2023.06.01 |
39. 컴포넌트에 "일반" JavaScript 논리 추가하기 컴포넌트를 여러 컴포넌트로 분할하기 (0) | 2023.06.01 |
38. "props"를 통해 데이터 전달하기 (0) | 2023.06.01 |