• DATA API

let data = [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
]

export default data;

• Component (e.g. Card)

export default function Card(props) {
  return(
    <>
      <div className="col-md-4">
        <img
          src={`https://codingapple1.github.io/shop/shoes${props.i}.jpg`}
          width="80%"
          alt=""
        />
        <h4>{props.shoes.title}</h4>
        <p>{props.shoes.price}</p>
      </div>;

    </>
  )
}

• App.jsx

// 메소드 사용 전
<div className="row">
	<Card shoes={shoes[0]} i={1} />
	<Card shoes={shoes[1]} i={2} />
	<Card shoes={shoes[2]} i={3} />
</div>

// 메소드 사용 후
<div className="row">
{
	shoes.map((a, i) => {
		return(
			<Card shoes={shoes[i]} i={i + 1} />
		)
	})
}
</div>