[React] 이미지삽입 / import, export

js 파일 만들어 export -> app.js 에서 import 해서 사용하기 

상품 설명 컴포넌트로 만들어 페이지에 출력

import logo from './logo.svg';
import './App.css';
import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap'
import img from './img/react-img.png';
// import 변수 from '이미지경로';
import { useState } from 'react';
import data from './data.js';
//export 한것 사용하기 import 변수명 from '경로'; => import 여러개 import {변수명} from '경로(./부터시작)'

function App() {

  let [shoes] = useState(data)

  return (
    <div className="App">
       <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">Shop</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
      <div className='main-bg' style={{backgroundImage:'url('+img+')'}}></div>
    
      <Container>
        <Row>
        {
          shoes.map((value,index)=>{
            return <Production shoes={value}/>;
          })
        }
        </Row>
      </Container>
      </div>

  );
}


  function Production(props){
    return(
      <Col md={4}>
            <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes.id+1)+".jpg"} width="80%"/>
            <h4>{props.shoes.title}</h4>
            <p>{props.shoes.price}</p>
      </Col>
      
    )}

export default App;

let a  = 10;

// export default 변수명; => 다른 파일에서 사용가능 (default  : 변수 하나만 있을 때 사용)
// export 여러개 : export {a,b}
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;