Chapter 05無料公開

1-3. 日々の練習に使う (カウンターを作ってみる)

terrierscript
terrierscript
2020.10.12に更新
このチャプターの目次
  1. カウンターを作る

カウンターを作る

本書の本筋ではありませんが、ひとまずここで基礎的なカウンターの作り方などは記載しておきます。
とはいえ普通のReactと何ら代わりはありません

import { useState } from 'react'

export default function Home() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={() => setCount(cnt => cnt + 1)}>
          increment
        </button>
        <button onClick={() => setCount(cnt => cnt - 1)}>
          decrement
        </button>
      </div>
    </div>
  )
}

起動するとこのような具合で動きます

もしnext.jsらしいコードを試したければgetServerSidePropsを利用してみると良いでしょう

export const getServerSideProps = () => {
  return { props: { initialCount: 10 } } // カウンターの初期値を10にする
}

export default function Home({ initialCount }) { // initiaCountがgeterverSidePropsから受け取れる
  const [count, setCount] = useState(initialCount)
  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={() => setCount(cnt => cnt + 1)}>
          increment
        </button>
        <button onClick={() => setCount(cnt => cnt - 1)}>
          decrement
        </button>
      </div>
    </div>
  )
}

このサンプルの場合、カウンタを10から開始することが出来ます