spread 연산자 = 전개연산자

프로젝트를 하던 도중 의문

 

import React, { useState } from "react";
import ProductCard from "./ProductCard";
import ProductsFilter from "./ProductsFilter";
import styled from "styled-components";
// import page
import Nav from "../MainPage/Nav";
// import Footer from "../MainPage/Footer";

const Products = (props) => {
  const [filtered, setFiltered] = useState("");

  const filterChangeHandler = (selected) => {
    setFiltered(selected);
  };

  const sortItems = () => {
    // const itemsCopy = [props.items];
    const itemsCopy = [...(props.items ?? [])];

    switch (filtered) {
      case "추천순":
        // 추천순으로 정렬 (기본 순서는 인덱스 순서)
        return itemsCopy;

      case "최신순":
        // 최신순으로 정렬 (가장 최근 날짜가 먼저 오도록)
        return itemsCopy.sort((a, b) => new Date(b.date) - new Date(a.date));

      case "높은 가격순":
        // 높은 가격순으로 정렬
        return itemsCopy.sort((a, b) => b.price - a.price);

      case "낮은 가격순":
        // 낮은 가격순으로 정렬
        return itemsCopy.sort((a, b) => a.price - b.price);
      default:
        // 기본적으로는 추천순으로 정렬
        return itemsCopy;
    }
  };

  return (
    <>
      <Box>
        <ProductsFilter
          selected={filtered}
          onChangeFilter={filterChangeHandler}
        />
        <List>
          {sortItems().map((item, index) => (
            <ProductCard
              key={index}
              id={item.id}
              src={item.src}
              name={item.name}
              info={item.info}
              color={item.color}
              price={item.price.toLocaleString()}
              discount={item.discount}
            />
          ))}
        </List>
      </Box>
    </>
  );
};

export default Products;

const Box = styled.div`
  max-width: 1830px;
  justify-content: center;
  margin: 0 auto;
  padding: 0 1rem;
`;

const List = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
`;

 

---

전개 연산자를 사용하여 배열의 각 요소를 풀어서 새로운 배열을 만듭니다.

 

const itemsCopy = [...props.items] 이 두개 차이를 모르겠어서 찾아봄

 

const itemsCopy = [props.items]와 const itemsCopy = [...props.items]는 중요한 차이가 있습니다.

1. const itemsCopy = [props.items]: 이 경우에는 배열이 하나의 요소로 들어가게 됩니다. 따라서 itemsCopy는 2차원 배열이 됩니다. 즉, props.items 배열 전체가 itemsCopy 배열의 첫 번째 요소가 되는 것입니다.

const itemsCopy = [props.items];

// 예를 들어, props.items = [1, 2, 3]이라면

// itemsCopy는 [[1, 2, 3]]이 됩니다.

 

const itemsCopy = [...props.items]: 이 경우에는 전개 연산자를 사용하여 배열의 각 요소를 풀어서 새로운 배열을 만듭니다. 따라서 itemsCopy는 props.items와 동일한 요소를 가진 새로운 배열이 됩니다.

 

const itemsCopy = [...props.items];

// 예를 들어, props.items = [1, 2, 3]이라면

// itemsCopy는 [1, 2, 3]이 됩니다.

 

따라서 배열을 복사하고자 할 때는 const itemsCopy = [...props.items]와 같이 전개 연산자를 사용하여 각 요소를 개별적으로 가져오는 것이 올바른 방법입니다.