useStateの使い方

概要

先日、React Hooksの学習を行いました。
今回は、useStateの使い方を紹介します。

目次

• 事前知識
• Hookを使用するメリット
• useStateの使い方
• useStateの実用例
• 最後に...

事前知識

Reactには、関数コンポーネント(関数型で定義されたコンポーネント)とクラスコンポーネント(クラス型で定義されたコンポーネント)があります。
クラスコンポーネントでは、関数コンポーネントとは異なり、state(状態管理)やライフサイクルメソッドを使用する事が出来ます。

Hookを使用するメリット

Hookを使用する事で、クラス機能(stateやライフサイクルメソッド)を関数コンポーネントでも使える様になります。
これにより、コードを簡潔に書け、可視性が上がりました。

補足
・旧Reactの記述方法で開発を進めており、途中にReact Hooksを使用しても、これまでの記述に悪影響を出さないというのもメリットの一つです。

useStateの使い方

まずは、useState関数をインポートします。

useState関数をインポート

import React, { useState } form 'react';

次に、下記のコードでuseState関数を定義します。

useState関数を定義

const [stateの変数名, stateを変更させる関数名] = useState(stateの初期値);

最後に、stateを変更させる関数名をJSX内でアロー関数を用いて呼び出します。

useState関数を呼び出す

const App = () => {
 stateを変更させる関数名(変更したstateの値)
};

useStateの実用例

useStateを使ったカウントアップ関数の例を紹介します。

useStateの使用例

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <p>{count}</p>
        <button onClick={() => setCount(count + 1)}>
          Click
        </button>
      </div>
    </div>
  );
};

export default App;

最後に...

今回は、useStateの使い方を紹介しました。

最後まで、読んでいただきありがとうございました。