お母さんでもわかるReact「Link、map」

## Linkコンポーネントについて
ページ遷移の際に通常のHTMLでは`aタグ`をよく使うと思います。
しかしNext.jsには`Linkコンポーネント`というものがあるので、説明していきたいと思います。

aタグのデメリット
・ページ全体をリロードするため、ページ遷移が遅くなる場合がある。
・状態がリセットされるため、状態管理にも影響。

まず従来の`aタグ`
```Header.jsx
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export function Header() {
  return (
    <header>
      <a href="../">index</a>
      <a href="../about">about</a>
    </header>
  )
}
```
```index.js
import { Inter } from 'next/font/google'
import { Header } from './components/Header'
import { Main } from './components/Main'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Header />
      <Main title="index.js" />
    </>
  )
}

```
`Link`を使用した場合
```Header.jsx
import Link from "next/link";//これ追加
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export function Header() {
  return (
    <header>
      <Link href="../">
        index
      </Link>
      <Link href="../about">
        about
      </Link>
    </header>
  )
}
```
```index.js
import { Inter } from 'next/font/google'
import { Header } from './components/Header'
import { Main } from './components/Main'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Header />
      <Main title="index.js" />
    </>
  )
}
```
これで必要な部分だけをリロードし、素早いページ遷移を行うことができました。
※これはRectの機能ではなく、Next.jsの機能です。

## mapの前にそもそもなんでforEachじゃないの？
繰り返しや配列関係で調べると、mapだけではなく**forEach**というメソッドが出てくるかと思います！
mapとforEachの違いについて少し触れたいと思います！

まず結論から記述すると
**①mapは返り値があるけど、forEachはない**

**②mapは自動で新たらしい配列を生成するけど、forEachはしない**
（もしforEachで新しい配列を作りたいなら、空配列を用意して`push`でブッコム）
↓
新しい配列を作らず、既存の配列を変更したいとかならforEachを使った方がいいです。

**③仮想DOMにおいて、mapの方が効率的！**
↓
①で記述したとおり、forEachは返り値がない。そのため「React」が、古い配列と新しい配列の差分を見つけることができず、全体を再レンダリングする必要があります。
↓
理想は変更した部分だけ再レンダリングをしたいので、mapが適切(大体は)。
↓
※ここで注意点ですが、返り値がない全てのメソッドのパフォーマンスが悪いわけではありません。

## mapを使って繰り返し表示する
ボタンなどが、いくつも繰り返されているときはmapを使うとを使うと少ない記述で表現できます。
mapを使わない場合
```index.js
export function Menu() {
  return (
    <>
      <div>
        <a>1-1</a>
        <a>1-2</a>
        <a>1-3</a>
      </div>
      <div>
        <a>2-1</a>
        <a>2-2</a>
        <a>2-3</a>
      </div>
      <div>
        <a>3-1</a>
        <a>3-2</a>
        <a>3-3</a>
      </div>
      <div>
        <a>4-1</a>
        <a>4-2</a>
        <a>4-3</a>
      </div>
      ...
```
mapを使った場合
```index.js
const numbers = [
  {
    first: "1-1",
    second: "1-2",
    third: "1-3"
  },
  {
    first: "2-1",
    second: "2-2",
    third: "2-3"
  },
  {
    first: "3-1",
    second: "3-2",
    third: "3-3"
  },
  {
    first: "4-1",
    second: "4-2",
    third: "4-3"
  }
];

export function Numbers() {
  return (
      <div>
        {numbers.map((number) => {
          return (
            <>
              <a>{number.first}</a>
              <a>{number.second}</a>
              <a>{number.third}</a>
            </>
          );
        })}
      </div>
   );
 }
```
mapを使った時も記述長いじゃんと思った人いるかもしれません！
そんな方はタイトル`<h1></h1>`でもつかしてみてください（タイトルじゃなくてもなんでもいいです）！
mapを使わない場合は4回記述しなくてはいけなのに対して、mapを使えば一回の記述で終わります！

↓

※ここで注意点！
下記のこの文では**key**が設定されていないため、エラーが発生する。
```jsx
<a>{number.first}</a>
<a>{number.second}</a>
<a>{number.third}</a>
```
なぜkeyが必要なのかというと、公式ドキュメントによると「どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます」とのことです。

要はkeyを指定しないと配列全てを管理や際レンダリングをしなくてはいけないので、keyをしてしたほうがパフォーマンスが上がるということだと思います！もっと詳しい人がいたら、詳しく教えてください！

```jsx
const numbers = [
  {
    id:"1",
    first: "1-1",
    second: "1-2",
    third: "1-3"
  },
  {
    id:"2",
    first: "2-1",
    second: "2-2",
    third: "2-3"
  },
  {
    id:"3",
    first: "3-1",
    second: "3-2",
    third: "3-3"
  },
  {
    id:"4",
    first: "4-1",
    second: "4-2",
    third: "4-3"
  }
];

export function Numbers() {
  return (
      <div>
        {numbers.map((number) => {
          return (
            <React.Fragment key={number.id}>
              <a>{number.first}</a>
              <a>{number.second}</a>
              <a>{number.third}</a>
            </React.Fragment>
          );
        })}
      </div>
   );
 }
```
このようになります！

ちなみにkeyにインデックスを指定するのは推奨されていないので避けましょう！
↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782070/032ede2e-d928-e4da-584f-76e241c20828.jpeg
" width=100%>