[React] Component, map 으로 반복

상품을 Card 라는 Component 로 반복해서 출력하려고 한다.

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

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

  return (
    <div className="App">

...

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

      <Container>
        <Row>
          <Card shoes={shoes}></Card>
        </Row>
      </Container>
    </div>
  );
}

function Card(props) {
  return props.shoes.map((a, i) => {
    return (
      <div className="col-md-4">
        {" "}
        <img
          src={"https://codingapple1.github.io/shop/shoes" + (i + 1) + ".jpg"}
          width="80%"
          alt=""
        ></img>
        <h4>{a.title}</h4>
        <p>{a.content}</p>
        <p>{a.price}</p>
      </div>
    );
  });
}

export default App;

App() 에서 shoes 라는 state 를 shoes 라는 이름으로 넘겨주고

 

Card() 라는 컴포넌트에서 이 state 를 받는다(props)

그리고 map 을 이용해서 props.shoes 에 있는 데이터들을 모두 출력하도록 했다.

이미지 같은 경우에는 경로가 shoes 뒤에 써있는 숫자만 다르기 때문에

i + 1 이라고(a.id + 1 이라고도 할 수 있다) 써줘서 경로만 달라지게 해줬다.

 

근데 저 return 을 할 때에 <Col></Col> 로 감싸면 반영이 안되어서 

      <div className="col-md-4">      </div>

로 감쌌다.