[React] Component로 css요소 복사하기

이번에는 Component로 css요소를 복사해볼 건데요!

얼핏 보기에는 Component를 열린태그로 그냥 둘러싸면될 것 같지만, Component로 그냥 둘러싸면 열린태그 안의 내용들은 Component 안에 들어가지 않게됩니다.

 

Card Component에 공통 css를 만들어보겠습니다.

3~5 : props를 전달받아 props의 className과 적용할 class인 card를 합쳐주었고, <div>열린태그 안에 {props.children}으로 열린 태그 안의 요소들을 집어 넣어주었습니다.

import "./Card.css";

const Card = (props) => {
  const classes = "card " + props.className;
  return <div className={classes}>{props.children}</div>;
  // children은 content를 나타내는 예약어
};

export default Card;

 

다음은 공통 css인 Card Component를 이용하는 방법입니다.

1 : Card를 import해줍니다.

4 : div가 아닌, 열린 태그의 Card로 하던데로 둘러싸서 작성하면 됩니다.

import Card from "./Card";
const ExpenseItem = () => {
  return (
    <Card className="expense-item">
		~
    </Card>
  );
}

export default ExpenseItem;