인프런 커뮤니티 질문&답변

쇼핑몰 프로젝트에서 db.json 파일을 API로 불러오는 코딩을 하였습니다. 그런데 전체 목록(ProductAll.js) 파일에서 부트스트랩으로 한 줄에 4개의 제품을 보여주고 있는데 한 줄에 4개의 제품이 안나오고 한줄에 하나씩만 나옵니다. 어디가 문제인지 모르겠습니다.

소스코드 같이 올려 드립니다.

답변 좀 부탁 드립니다.

 ProductCard.js 파일입니다.

import React from 'react'

const ProductCard = ({item}) => {
  return (
    <div className="card">
      <img width={200} src={item?.img} alt="제품이미지" />
      <div>Concious Choice</div>
      <div>{item?.title}</div>
      <div>{item?.price}</div>
      <div>{item?.new === true ? "신제품" : ""}</div>
    </div>
  );
};

export default ProductCard

App.css 파일입니다.
- css는 제가 임의로 작성을 했습니다.

.login-button {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}

.login-margin {
    margin-left: 7px;
}

.image_size {
    width: 60px;
}

.nav-section {
    width: 100;
    display: flex;
    justify-content: center;
}

.menu-list {
    display: flex;
    list-style-type: none;
}

.menu-list li {
    padding: 10px;
}

.menu-area {
    display: flex;
    justify-content: center;
}

.search-box {
    border-bottom: 1px solid black;
    position: absolute;
    right: 20px;
    padding: 5px;
}

.search-box input {
    border: none;
    margin-left: 5px;
}

.search-box input:focus {
    outline: none;
}

.card {
    border: none !important;
    margin-bottom: 10px;
}

ProductAll.js 파일입니다.

import React, { useEffect, useState } from 'react'
import ProductCard from '../component/ProductCard';
import {  Container, Row, Col } from 'react-bootstrap';


const ProductAll = () => {
  const [productList, setProductList] = useState([]);
  const getProducts = async () => {
    let url = "http://localhost:5000/products";
    // url에 있는 데이터(json)를 받는 함수.
    let response = await fetch(url);
    // JSON 데이터를 javascript 객체로 변환해 주는 함수.
    let data = await response.json();

    setProductList(data);
  }
  useEffect(() => {
    getProducts();
  }, []);
  return (
    <div>
      <Container>
        <Row>
          {productList.map((menu) => (
            <Col md={3}>
              <ProductCard item={menu} />
            </Col>
          ))}
        </Row>
      </Container>
    </div>
  )
}

export default ProductAll