비구조화 할당(구조분해 할당)

구조분해할당
-객체 or 배열에 적용 할 수 있는 ES6 문법
-코드를 간결하게 작성 가능하다

처음 작성한 코드

{productList.map(item => {
  return (
    <Product
      key={item.id}
      id={item.id}
      brand={item.brand}
      name={item.name}
      korean_name={item.korean_name}
      retail_price={item.retail_price}
      thumbnail_url={item.thumbnail_url}
      number={item.number}
    />
  );
})}

구조분해 할당 후

{productList.map(item => {
  const {
    id,
    brand,
    name,
    korean_name,
    retail_price,
    thumbnail_url,
    number,
  } = item;

  return (
    <Product
      key={id}
      id={id}
      brand={brand}
      name={name}
      korean_name={korean_name}
      retail_price={retail_price}
      thumbnail_url={thumbnail_url}
      number={number}
    />
  );
})}