react 컴포넌트 실습 이어서 하기
import './Expenses.css';
import ExpenseItem from './ExpenseItem';
function Expenses(props){
return(
<div className='expenses'>
<ExpenseItem
title={props.itmes[0].title}
amount={props.itmes[0].amount}
date={props.itmes[0].date}
></ExpenseItem>
<ExpenseItem
title={props.itmes[1].title}
amount={props.itmes[1].amount}
date={props.itmes[1].date}
></ExpenseItem>
<ExpenseItem
title={props.itmes[2].title}
amount={props.itmes[2].amount}
date={props.itmes[2].date}
></ExpenseItem>
<ExpenseItem
title={props.itmes[3].title}
amount={props.itmes[3].amount}
date={props.itmes[3].date}
></ExpenseItem>
</div>
);
}
export default Expenses;
import Expenses from "./components/Expenses";
function App() {
const expenses = [
{
id: "e1",
title: "Toilet Paper",
amount: 94.12,
date: new Date(2020, 7, 14),
},
{ id: "e2",
title: "New TV",
amount: 799.49,
date: new Date(2021, 2, 12),
},
{
id: "e3",
title: "Car Insurance",
amount: 294.67,
date: new Date(2021, 2, 28),
},
{
id: "e4",
title: "New Desk (Wooden)",
amount: 450,
date: new Date(2021, 5, 12),
},
];
return (
<div>
<h2> hello</h2>
<Expenses itmes={expenses} />
</div>
);
}
export default App;
데이터를 전달하기 위해 컴포넌트를 설정하는 props가 중요함.
컴포넌트는 JSX를 결합한 HTML 코드
컴포지션은 작은 컴포넌트로부터 사용자 인터페이스를 구축하는 접근 방법을 말한다.
ex) 컴포넌트의 태그 사이에 있는 콘텐츠를 전하고 싶다면?
웹 개발에서 “Card”란 보통 둥근 모서리에 옅은 그림자 등의 요소가 있는 컨테이너 모양을 의미.