Zenn
🎺

React HookのuseStateについて

2024/02/17に公開
JavaScript
Next.js
React
#
hook
#
useState
tech

初めに

今回は、ReactのuseStateについて理解をして行きたいと思います。
Reactを学習し始める時に誰しもが皆通る道だと思います。
なので、useStateの基礎部分を復習のついでにメモとして残したいと思います。

Reactとは

Reactとは、WebサービスのUIを構築するJavaScriptのライブラリです。
近年人気があり、大規模開発になっても管理しやすさなどや、コンポーネントでUIのパーツを分けることができる為、一部だけ変更すれば良いなど再利用しやすいという魅力があります。
Reactは、Facebook社が開発したライブラリで、FacebookやInstagram、Netflixなどに採用されています。

useStateとは

useStateとは、関数コンポーネントのstate(状態)の保持や更新するフックのことです。
useStateを使うことで、リアルタイムでの画面更新が可能になり、関数コンポーネントの中で状態管理をすることができます。

実際に次から、コードを書いて行きたいと思います。

useStateの使い方

今回の記事では、TypeScriptではなくJavaScriptを使用します。

useStateをimport

useStateを扱う為にimportをしていきます。
以下のコードをReactのファイルの上部に記載してください。

+ import React, { useState } from 'react';

useStateの設定

上記でファイルにimportされたので、次にuseStateの基本書式について学習して行きます。
数字をカウントするコードを記述して行きます。

//countが変数で、setCountメソッドを使ってcountの値を更新することができる
+ const [count, setCount] = useState(0);

以下のコードが全体で見たときです。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);　//カウンターを作る為、初期値を0に設定


  return (
    <>
     <h1>カウント　{count}</h1> //countは、 先ほど定義した変数
    </>
   )
}
 

export default Counter

useStateの初期値を0にしているため、ブラウザで確認すると、「カウント 0」と表示されると思います。

次は、値の更新について学習して行きたいと思います。

useStateの更新

先ほど定義した、setCountメソッドでcountの値を更新できるようにコードを書いていきます。

下記は、countを+1するonClickイベントです。

<button onClick={clickHandle}>+</button>

上記の内容として、クリックされた時のcountの値を更新する為に、onClickイベントを使用します。
以下にonClickイベントが呼び出された時のclickHandleの処理を書いて行きたいと思います。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);　//カウンターを作る為、初期値を0に設定

+  const clickHandle = () => {
+    setCount(count + 1)
+  }

  return (
    <>
+    <button onClick={clickHandle}>+</button>
     <h1>カウント:　{count}</h1> //countは、 先ほど定義した変数
    </>
   )
}
 

export default Counter

これで、onClickイベントが発生したら、clickHandle関数の処理が行われ、countが更新されるという内容のコードが完成しました。

しかし、注意点がございます。

処理のフローとして、

  1. ボタンを押し、clickHandleの処理が行われる。
  2. setCountが呼ばれ、countの値が更新される。
  3. コンポーネントの再レンダリング後に画面にcountの更新された値が表示される。

なんとなく使っていたuseStateですが、
更新は非同期処理ということもあり、どのように処理がされているのか知ることで、より理解が深まるかと思います。

最後に

今まで、useStateをなんとなくの理解で使っていましたが、再度調べてみると、どのようなフローで処理が行われているか知ることができ、基礎の部分を復習することが出来ました。

現在、Next.jsについて学習中ですので、また復習や気になることがありましたら、記事にしたいと思います。

Discussion