[React] Card 컴포넌트 만들기

 

✔ Card 컴포넌트 만들기

• src > chapter_13 > Card.jsx

function Card(props) {
    const {title, backgroundColor, children} = props;

    return (
        <div 
            style={{
                margin: 8,
                padding: 8,
                borderRadius: 8,
                boxShadow: "0px 0px 4px grey",
                backgroundColor: backgroundColor || "white",
            }}
        >
            {title && <h1>{title}</h1>}
            {children}
        </div>
    );
}

export default Card;

 

• src > chapter_13 > ProfileCard.jsx

import React from "react";

function FancyBorder(props) {
    return (
    	<div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    );
}

export default FancyBorder;

 

• index.js 고치고, npm start

?