개발/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;