01. react_반복문장 component로 제작

1.  DATA 

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;

2.  반복되는 구문

       <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].price }</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>

Map( ) 함수 사용

 

  <div className="row">
          {shoes.map((a, i) => {
            return <Product shoes={shoes[i]} item={i} />;
          })}
        </div>

 

import React from "react";

const Product = (props) => {
  return (
    <div>
      <div className="col-md-4">
        {/* public 폴더 이미지 쓰는 권장 방식
            src={process.env.PUBLIC_URL + '이미지.jpg'}
            */}
        <img
          src={
            "https://codingapple1.github.io/shop/shoes" +
            (props.item + 1) +
            ".jpg"
          }
          width="80%"
        />
        <h2>{props.shoes.title}</h2>
        <p>{props.shoes.price}</p>
      </div>
    </div>
  );
};

export default Product;