Reactでスプレット構文を書いてみた

概要

今回は、Reactの内でスプレット構文の基本的な書き方についてご紹介いたします。

スプレット構文が書けるようになると配列やオブジェクトを展開する際に
定義した要素を順にまとめて展開できるようになるのでコードを省略して書くことができます。

注意点
Reactを用いてスプレット構文（その他の定義コードにも共通する）は

「const」　と　「return」　の間に書くこと。

スプレット構文の書き方

下記のコードがReactを使用したスプレット構文の基本的な書き方になります。

import React from "react";

const Test: React.FC = () => {
  const array = [1, 2, 3];
  console.log(...array);
  return <div>array</div>;
};

export default Test;

出力結果

• ブラウザ上
  「array」という文字が表示されます。

• コンソール上
  「1 2 3」とカッコの取れた状態で表示される。

スプレット構文部の「解説」

3行目の配列に数字の1,2,3の要素を格納いています。

  const array = [1, 2, 3];

4行目でスプレット構文を用いて要素を順に展開し、
コンソール上に出力しています。

 console.log(...array);

5行目で「arrey」という文字列をブラウザ上に出力しています。

 return <div>array</div>;

まとめ・今後の課題

今回はReactでのスプレット構文の書き方についてのまとめました。

他にも記事を投稿しますので、ぜひチェックしてみてください。