image-Reactのstateとは?「状態」の意味と使い方を初心者向けにやさしく解説

Reactのstateとは?「状態」の意味と使い方を初心者向けにやさしく解説

pen-icon2024.3.12

この記事は約1分で読めます

Profile Pic

筆者:三好アキ(専門用語なしでプログラミング)

▶︎ 私について詳しくはこちら

状態とは?

Reactでは「状態」という言葉がひんぱんに使われます。

「状態を管理する」や「状態を更新する」といったように。

日本語ではいまいち意味のつかみにくい「状態」という言葉ですが、この「状態」とは「データの状態」のことを指しています。

「アプリ内のデータの状態」です。

では「アプリ内のデータ」とは具体的に何を指すのでしょうか?

アプリが私たちユーザーに表示している「世界各地の天気」や「為替」、「料理レシピ」「口コミ」などは当然「アプリ内のデータ」です。

他にも「ユーザーがボタンをクリックしたか否か」「合計何回クリックしたか」「ユーザーがフォームに入力した文字」なども「アプリ内のデータ」に含まれます。

そして重要なポイントは、これらは時間の経過やユーザーのアクションによって常に変化していくという点です

たとえばユーザーのクリック数が今の時点では5回でも、10秒後には7回になっていることもあるでしょう。

時間の経過やユーザーの操作などによって変化するアプリ内のデータの「状態」を追跡し、管理すること。

そのためにReactではstateが使われています。

このstateはReactを難しく感じる理由のひとつです。

stateだけでなく、JavaScriptの理解やコンポーネントの概念など、Reactでつまずきやすいポイントと乗り越え方を一本でまとめたガイドがあります▼


image

⚫︎ monotein.com/present

image

⚫︎ monotein.base.shop/p/00005

Profile Pic

✤ 筆者 ✤
三好アキ(専門用語なしでプログラミング)


非IT出身。かつてプログラミングの専門用語の壁に何度もぶつかり、挫折した経験から、「専門用語なし」のメソッドを確立。1,200人以上のビギナーのフロントエンド開発入門を成功させる。翔泳社『動かして学ぶ!Next.js/React開発入門』(韓国でも出版)など著書30冊以上。Amazonベストセラー1位複数回獲得。


記事の執筆、法人向けReact研修なども行っています ▼
技術記事の執筆について
法人研修について