INDEX

1. 컴포넌트 만들기(숙제1)
2. shoes를 Card 컴포넌트에 데이터바인딩(숙제2)
3. map 반복문(숙제3)

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';

function App() {
  let [shoes] = useState(data);

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div className='main-bg'></div>
      <div className="container">
        <div className="row">
					{/* 컴포넌트화 */}
          <Product shoes={shoes} />
          <Product shoes={shoes} />
          <Product shoes={shoes} />
        </div>
      </div>
    </div>
  );
}

// 컴포넌트 생성
**function Product(props) {
  return (
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + '/img/shoes1.jpg'} width="80%" />
      <h4>{props.shoes[0].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}</p>
    </div>
  )
}**

export default App;

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';

function App() {
  let [shoes] = useState(data);

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div className='main-bg'></div>
      <div className="container">
        <div className="row">
          <Product **shoes={shoes[0]} i={1}** />
          <Product **shoes={shoes[1]} i={2}** />
          <Product **shoes={shoes[2]} i={3}** />
        </div>
      </div>
    </div>
  );
}

function Product(props) {

  return (
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + '/img/shoes'+props.i+'.jpg'} width="80%" />
      **<h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>**
    </div>
  )
}

export default App;

const numbers = [1, 3, 5];
const listItems = numbers.map((number, idx) => {
    console.log(number);
});

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';

function App() {
  let [shoes] = useState(data);

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <div className='main-bg'></div>
      <div className="container">
        <div className="row">
          **{
            shoes.map((a, i)=>{
              return (
                <Product key={i} shoes={shoes[i]} i={i} />
              )
            })
          }**
        </div>
      </div>
    </div>
  );
}

function Product(props) {
  return (
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + '/img/shoes'+**(props.i+1)**+'.jpg'} width="80%" />
      **<h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>**
    </div>
  )
}

export default App;