React実装などでたまに出てくるドット3つの意味

Reactをやっているとたまにドットの3つ付いた記法を見かけることがあります。

この記法は子コンポーネントへ値を渡したいときなどに使われます。

例

const props = { foo: 'foo', hoge: 'hoge' };
render() {
  return <Component {...props} />
}

ドット3つを使わない場合はこのようにかきます。

const props = { foo: 'foo', hoge: 'hoge' };
render() {
  return <Component foo={props.foo} hoge={hoge} />
}

参考

React での「...」（ドット3つ）の記法