お母さんでもわかる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が設定されていないため、エラーが発生する。

<a>{number.first}</a>
<a>{number.second}</a>
<a>{number.third}</a>

なぜkeyが必要なのかというと、公式ドキュメントによると「どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます」とのことです。

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

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にインデックスを指定するのは推奨されていないので避けましょう！
↓