공부계획

react 컴포넌트 실습 이어서 하기

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

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;

composition (children prop)

데이터를 전달하기 위해 컴포넌트를 설정하는 props가 중요함.

컴포넌트는 JSX를 결합한 HTML 코드

컴포지션은 작은 컴포넌트로부터 사용자 인터페이스를 구축하는 접근 방법을 말한다.

ex) 컴포넌트의 태그 사이에 있는 콘텐츠를 전하고 싶다면?

웹 개발에서 “Card”란 보통 둥근 모서리에 옅은 그림자 등의 요소가 있는 컨테이너 모양을 의미.