컴포지션

둥글모서리에 옅은 그림자가 있는 상자 디자인을 Card 라고 함.

이 디자인을 위한 스타일 코드가 중복 되고 있음.

Card를 위한 컴포넌트를 새로 작성하고 중복되는 스타일을 css파일로 만듦

그리고 Card 디자인을 사용하는 컴포넌트를 감싸고 있는 div 태그를 Card 태그로 교체한다.

그렇지만 새로 제작한 컴포넌트는 다른 태그를 감싸는 래퍼로써 사용할 수 없기때문에

div 태그를 return 한다.

css파일을 import 하여 스타일을 적용하기 때문에 div 태그에 Card 클래스 네임을 적어주여야 하는데

하나의 클래스네임만 지정한다면 다른 컴포넌트에서 사용할 때에 추가로 클래스 네임을 적을 수 없다.

import './Card.css';
function Card(props)
{
    const Class='Card '+props.className;
    return(
        <div className={Class}>{props.children}</div>
    )
}
export default Card;

위와같이 동적으로 클래스네임을 추가할 수 있도록 한다.