(React) 쇼핑몰 만들기 - 상품 목록 컴포넌트로 만들기

상품 목록을 통으로 Component 로 만들어준다.

function Shoe(props) {
  return (
    <div className="container">
      <div className="row">
        {props.shoes.map((item, index) => {
          return (
            <div className="col-md-4" key={index}>
              <img src={item.src} width="80%" />
              <h4>{item.title}</h4>
              <p>{item.content}</p>
              <p>{item.price}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

기존의 상품 목록 태그를 통으로 아래코드로 바꾸면 끝.

<Shoe shoes={shoes}></Shoe>

컴포넌트를 파일로 따로 빼볼까?
Shoe.js 파일을 생성하고 그 안에 function Shoe(props)~ 를 그대로 넣어준다.
export는 당연히 붙여주고.

/* eslint-disable */

function Shoe(props) {
  return (
    <div className="container">
      <div className="row">
        {props.shoes.map((item, index) => {
          return (
            <div className="col-md-4" key={index}>
              <img src={item.src} width="80%" />
              <h4>{item.title}</h4>
              <p>{item.content}</p>
              <p>{item.price}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Shoe;

App.js 에 import Shoe from "./Shoe"; 삽입.
export-import 는 실과 바늘 관계.

동일하게 작동하는지 확인해본다.
된다. 끝.

App.js 전체코드

/* eslint-disable */

import "./App.css";
import { Button, Navbar, Container, Nav } from "react-bootstrap";
import { useState } from "react";
import data from "./shoes";
import Shoe from "./Shoe";

function App() {
  const [shoes, setshoes] = useState(data);

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">My shop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#pricing">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

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

      <Shoe shoes={shoes}></Shoe>
    </div>
  );
}

export default App;