react wrapper component

중복되는 css사용을 줄이기 위해 사용

import './Card.css'

function Card(props) {
    const classes = 'card ' + props.className;
    return (
        <div className={classes}>{props.children}</div>
    )
}

export default Card;

카드모양의 css가 중복되면 이렇게 카드 컴포넌트와 그 css를 붙힌 컴포넌트를 만들어 사용

클래스가 망가지는 것을 막기 위해 클래스를 합쳐주고

카드 안에 컨텐츠를 넣기 위해 children을 사용

<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>

이런 형식으로 감싸준다

모달창이나 경고창에 유용