[React] 컴포넌트로 분리하기 / Map 사용하기

 

---

 

 

 

 

◽ Map 사용하기

import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, Nav, Container } from "react-bootstrap";
import './App.css';
import img from './img/bg.png'
import { useState } from "react";
import itemArr from "./data.js";

function App() {

  let [item, setItem] = useState(itemArr)

  return (
    <div className="App">
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">React</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div className="main-bg"></div>

      <div className="container">
        <div className="row">
          { item.map((item, index) => {
            return <Card item={item} key={index}></Card>
          }) }
        </div>
      </div>
    </div>
  );
}

function Card(props) {
  return (
      <div className="col-md-4">
        <img src={props.item.img} width="80%" />
        <h4>{props.item.title}</h4>
        <p>{props.item.price}</p>
      </div>
  )
}

export default App;

let itemArr = [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000,
    img: 'https://codingapple1.github.io/shop/shoes1.jpg'
  },
  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000,
    img: 'https://codingapple1.github.io/shop/shoes2.jpg'
  },
  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000,
    img: 'https://codingapple1.github.io/shop/shoes3.jpg'
  }
]

export default itemArr

 

 

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌