Map

機能と学習理念

✔map関数を使用して重複するHTMLコードを簡略化
✔普通for反復文を書きたいなら?

Map関数

97 map関数は元のデータ型を変形せず、新しい変数に使用します.

let arr = [1,2,3];
let newArray = arr.map(function(a){ return a * 10 });

上図に示すように、newArrayには[10,20,30]が含まれている.

JSXで重複文をmapとして使用する場合

function App (){
  return (
    <div>
      HTML  
      ...
      { arr.map(function(){
        return (<div>안녕하세요</div>)
      }) }
    </div>
  )
}

97 arrは3つの状態しか生成しないと仮定する.
これで24142 arrという名前の配列には3つのデータが含まれています.
◾運転後、divも3つ残っています.

実践の応用を試みる

複文を書くときは、必要な資料に地図を貼れば、資料の個数で複文を回すことができます.
◾繰り返したいHTMLを返信に書く
◾既存のコードよりはるかに少ないコードで文章リストHTMLを生成できます.

重複するHTMLに対して異なるタイトルを使用する場合は、

見出しを3回繰り返すのではなく、文を繰り返すたびに、
{記事タイトル[0]}
{記事タイトル[1]}
{記事タイトル[2]}
◾これらのデータをmap関数に入れ、callback関数にパラメータnumを追加する場合は、配列内のデータを表します.
☢はそれを𗭶に入れ、順番に異なるタイトルを出力します.
重複するHTMLにonClickのようなイベント関数を入れてもうまく機能します.

普通のfor反復文を書きたいなら

function App (){

  function 반복된UI(){
    let arry = [];
    for (let i = 0; i < 3; i++) {
      arry.push(<div>안녕하세요</div>)
    }
    return arry
  }
  return (
    <div>
      HTML .....
      
      { 반복된UI() }
    </div>
  )
}

上記のサンプルコードは、for反復文を使用して3つのdivを作成する例です.
for in for ofも同様にmapを使用すると有利です.