[react 기록용, 쇼핑몰]2-4.component, props, map

var 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;

/*eslint-disable-next-line*/
import React, {useState} from 'react';
import { Button,Navbar,Nav,NavDropdown,Jumbotron,} from 'react-bootstrap';
import './App.css';
import Data from './data.js';

function App() {

  let [shoes, shoes변경] = useState(Data);

  return (
    <div className="App">
      <div className="container">
        <div className="row">
          {shoes.map(function(shoe,i){
            return(<DescGood shoe={shoe} i={i} key={i}/>)
          })}
        </div>
      </div>
    </div>
  );
}

function DescGood(props){
  return(
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes'+ (props.i+1) +'.jpg'}></img>
      <h4>{ props.shoe.title }</h4>
      <p>{ props.shoe.content } & { props.shoe.price }</p>
    </div>
  )
}

export default App;