상품 리스트 페이지에 각 아이템 가져오기

index.js에 만들어져있는 getItems

export const getItems = (params) => API.get("/items", params);

 

해당 상품 리스트 페이지에서 import해서 가져다 쓰기

import { getItems } from "../common/api";

 

async await 사용

const WholeCake = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    async function itemList() {
      const resultItems = await getItems();
      setItems(resultItems.data);
    }
    itemList();
  }, []);

 

map으로 뿌려서 아이템 뿌려주기(앞에 && 붙여서 이미지 못불러왔을 때.. 설정해줘야 함)

<Row>
          {items.map((data) => (
            <Col key={data.id}>
              <Link href={`/itemDetail/${data.id}`}>
                <img
                  className="w-24 h-24"
                  src={data.img}
                  alt="홀케이크 이미지"
                />
                <div>
                  <p className="text-xs">{data.name}</p>
                  <p className="text-xs">{data.price.toLocaleString()}원</p>
                </div>
              </Link>
            </Col>
          ))}
        </Row>

 

상품리스트 페이지 로드되었을 때