目次
スプレッド構文
Reactというよりかは、javascriptの話ですね。
簡単に言うと、配列やオブジェクトを...で簡単に展開できます。
ってことだと思います。
最近よく利用することが多いので紹介しておきます。
こういうサイトを使うと、
サクッと試していただけると思います。
説明はしません。
先程のサイトなどで実行して試してもらうと、すぐ理解できると思います。
スプレッド構文の例（配列）
const arr1 = [1,2,3,4];
// 配列のクローン
const arr2 = [...arr1];
console.log(arr2);
// arr1を展開しつつ、他の値も追加
const arr3 = [0, ...arr1, 5,6,7];
console.log(arr3);
// 複数の配列を展開
const arr4 = [...arr1,...arr3];
console.log(arr4);
スプレッド構文の例（オブジェクト）
const obj1 = { a: 1, b: 2}
const obj2 = { ...obj1 }
console.log('オブジェクトのクローン1: ' + JSON.stringify(obj2))
const obj3 = { ...obj1, c: 3 }
console.log('オブジェクトのクローン2: ' + JSON.stringify(obj3))
const obj4 = { ...obj1, ...{ c: 3, d: 4} }
console.log('オブジェクトのマージ: ' + JSON.stringify(obj4))
const obj5 = { ...obj1, b: 5 }
console.log('値を上書き: ' + JSON.stringify(obj5))
const obj6 = { ...obj1, ...{ a:9, d: 7 }}
console.log('値を上書き2: ' + JSON.stringify(obj6))
以上