React.jsのuseStateについてまとめてみる

はじめに

React.jsを最近学習し始めたので、言語化による理解度の促進のための記事です。

useStateとは

useStateとはReact hooksの1つです。
コンポーネントの状態(state)を管理します。
コンポーネントの状態変更を察知して、状態に変更があると、そのコンポーネントを再レンダリングしてくれる機能を提供します。

今回扱うコード

非常にシンプルです。

import { useState } from 'react'

function App() {
  const [num, setNum] = useState(0);

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={()=>setNum(num+1)}>+</button>
        <button onClick={() => setNum(num - 1)}>-</button>
        <button onClick={()=>setNum(0)}>Reset</button>
      </div>
    </>
  )
}
export default App

コードの解説

import部分

import { useState } from 'react'

ReactからuseStateをimportし、useStateを扱えるようにします。

---

function App() {} 内部

const [num, setNum] = useState(0);

ここでuseStateを使っています。
useStateの基礎構文は以下です。

const [state,set関数] = useState(stateの初期値)

JSの分割代入を用いて、useStateの返り値をnumとsetNumにそれぞれ代入しています。

useStateをは2つの値を持つ配列を返します。
1つめは現在のstateです。
このコードでは初期値である0がnumに代入されています。

2つめはset関数と呼ばれるものが返ってきます。
このset関数というのは現在のstateを更新するための関数です。
今回はsetNumにそれが代入されています。

---

  return (
    <>
      <div>
        <p>{num}</p>
        <button onClick={()=>setNum(num+1)}>+</button>
        <button onClick={() => setNum(num - 1)}>-</button>
        <button onClick={()=>setNum(0)}>Reset</button>
      </div>
    </>
  )

コンポーネントを構成しているコードです。
{num}は現在のstateを表示します。

続いてbuttonタグの中を見ていきましょう。

<button onClick={()=>setNum(num+1)}>+</button>

buttonタグのonClickというプロパティにアロー関数が渡されています。
(厳密には、onClickはイベントハンドラといいます)

このbuttonタグがクリックされると、setNum(num+1)が動きます。
このbuttonは現在のnumを+1します。
そしてコンポーネントを再レンダリングします。

下記も同様です。

<button onClick={() => setNum(num - 1)}>-</button>
<button onClick={()=>setNum(0)}>Reset</button>

まとめ

今回はuseStateの使い方についてまとめてみました。
今まで生のJSかjQueryしか使ったことがなかったですが、かなり便利ですね。