composition (children props)

컴포지션이란 컴포넌트를 합치는 걸 말한다.

Card.js 파일을 만들어주고
아래와 같이 css임포트 해줬다...

import "./Card.css";

function Card(props) {
  const classes = "card " + props.className;

  return <div className={classes}>{props.children}</div>;
}

export default Card;

근데 이부분 왜 썼는지 솔직히 이해가 안감...또르륵

const classes = "card " + props.className;

계속 공부하다가 알게 되면 다시 정리하기....
현재 혼자 생각해본건....
card css만 적용된 상태이니까 다른 클래스네임에 있는
css를 적용해주기 위해서 props를 가져와주고
거기에 card를 더해준걸 보관해준다음에
그걸 밑에다가 적어준것이 아닐까하는데....
아직 확실하지 않음...

암튼... props.children은 찾아보니 재사용을 위해
사용된다고 한다...

Card.css는 이렇게 따로 컴포넌트로 만들어줬고

.card {
  border-radius: 12px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

이 css적용되는 ExpenseItems.js의 div부분을 Card로 바꿔줬고

function ExpenseItem(props) {
  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );
}

Expense.js 의 div부분도 Card로 바꿔줬음...

function Expenses(props) {
  return (
    <Card className="expenses">
      <ExpenseItem
        title={props.items[0].title}
        amount={props.items[0].amount}
        date={props.items[0].date}
      />
      <ExpenseItem
        title={props.items[1].title}
        amount={props.items[1].amount}
        date={props.items[1].date}
      />
      <ExpenseItem
        title={props.items[2].title}
        amount={props.items[2].amount}
        date={props.items[2].date}
      />
      <ExpenseItem
        title={props.items[3].title}
        amount={props.items[3].amount}
        date={props.items[3].date}
      />
    </Card>
  );
}

강의에서 wrapper component를 썼는데
props.children를 이용해 부모컴포넌트가 자식 컴포넌트를
감싸주는 ? 그런뜻인거 같다..