리액트 Custom Component

리액트에서 커스텀 컴포넌트로 다른 컴포넌트를 감싸는 래퍼 객체로 사용하면
안에 있는 요소들이 죽는다.
왜냐하면 html에서 제공하는 tag는 자동으로 props.children 을 넣어주지만 커스텀 컴포넌트는 별도로 넣어줘야 한다.

function Card(props) {
	return <div className="card">{props.children}</div>
}

커스텀 컴포넌트를 사용하는 이유는 코드의 재사용 때문이다.
하지만 위와 같이 children만 추가해준다면
Card 컴포넌트를 사용한 후 스타일을 추가로 넣어주어도 적용되지 않는다.

<Card className="expense-item">
	<div>
    </div>
</Card>

따라서 children 뿐 만 아니라 className도 추가해줘야 한다.

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