개발/react

[react 기록용, 쇼핑몰]2-3. 데이터 export, import

연별(YeonStar) 2021. 4. 4. 08:54
var Data = [
    {
      id : 0,
      title : "White and Black",
      content : "Born in France",
      price : 120000,
      src : "https://codingapple1.github.io/shop/shoes1.jpg"
    },
  
    {
      id : 1,
      title : "Red Knit",
      content : "Born in Seoul",
      price : 110000,
      src : "https://codingapple1.github.io/shop/shoes2.jpg"
    },
  
    {
      id : 2,
      title : "Grey Yordan",
      content : "Born in the States",
      price : 130000,
      src : "https://codingapple1.github.io/shop/shoes3.jpg"
    }
  ] ;


export default Data;
​
/*eslint-disable-next-line*/
import React, {useState} from 'react';
import { Button,Navbar,Nav,NavDropdown,Form,FormControl, Jumbotron,Container,Row,Col,img } 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">
          <div className="col-md-4">
            <img src={shoes[0].src}></img>
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].content } & { shoes[0].price] }</p>
          </div>
        </div>
      </div>
    
    </div>
  );
}

export default App;