Card 컴포넌트, data 컴포넌트를 각각 만들어서 아래와 같이 작성했는데 이렇게 해도 괜찮은 건가요??
결과는 잘 나오긴 하는데 이런 식으로 해도 효율적으로 사용할 수 있을지 궁금합니다!
이미지 주소를 data에 추가했습니다.
<Card.jsx>
function Card ({shoes}) {
return (
<div className="container" >
<div className="row">
{
shoes.map((item) => {
return(
<div className="col-md-4" key={item.id}>
< img src={item.img} width='80%'/>
<h4>{item.title}</h4>
<p>{item.content}</p>
<p>{item.price}</p>
</div>
)
})
}
</div>
</div>
)
}
export default Card
<data.jsx>
const data = [
{
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000,
img : 'https://codingapple1.github.io/shop/shoes1.jpg',
width : '80%'
},
{
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000,
img : 'https://codingapple1.github.io/shop/shoes2.jpg',
width : '80%'
},
{
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000,
img : 'https://codingapple1.github.io/shop/shoes3.jpg',
width : '80%'
}
]
export default data
