React Array(),fill(),map() 메서드를 이용한 배열 생성

📖 Array(),fill(),map() 를 이용하여 배열 생성

먼저 구현해야하는 내용은 Home 컴포넌트에서 자식 컴포넌트인 Product 컴포넌트에 데이터를 전송합니다. 전송해야할 내용은 이베이의 rating 입니다. 즉 별 개수 입니다. Home에서 보낸 rating의 크기 만큼 별로 전환 하여 출력되도록 구현해보겠습니다.

📖 구현

Home 컴포넌트에서 rating = {3} 을 전달하겠습니다. 여기서 “3” 이 아닌 {3}인 이유는 숫자로 전달해야하기 때문입니다. 아래 예제에서 같이 Array(rating)에 3이 전달하고 콘솔해보면 [empty × 3]값이 나옵니다. 여기에서 fill() 메서드를 사용해서 인자를 채워줍니다. 인자가 없으므로 undifine가 할당됩니다. 여기까지 콘솔해보겠습니다. [undefined, undefined, undefined]

그 다음 map() 메서드를 이용해서 각 자리 index에 해당하는 값을 할당해보면 배열에 <p>★</p>이 채워져서 구현됩니다. 즉 화면에는 ★★★ 별이 3개가 출력됩니다.

import React from "react";
import "./Product.css";

function Product({ id, image, title, price, rating }) {
  return (
    <div className="product">
      <div className="product__info">
        <p>{title}</p>
        <p className="product__price">
          <small>가격</small>
          <strong>{price}</strong>
          <small>원</small>
        </p>

        <div className="product__rating">
          {Array(rating)
            .fill()
            .map(() => (
              <p>★</p>
            ))}
        </div>
      </div>
      <img src={image} alt="" />
      <button>장바구니에 담기</button>
    </div>
  );
}

export default Product;