非構造割り当て(構造分解割り当て)

2962 ワード
React TIL テキストリンク
構造分解の割り当て
-オブジェクトまたは配列に適用可能なES 6構文
-コードを簡潔に記述できる
イニシャルコード
{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}
    />
  );
})}
CSSのローディングアニメーション-モーフィングのアイコン効果
RPMパッケージの作り方