【ISSUE】【React】useStateについて

0

2024年12月23日 8:40

はじめに

備忘録がてら、Reactの基礎であるuseStateについて書いていきます。

useStateとは

useStateは、Reactフレームワークで提供されるフック(Hook)の一つです。useStateフックを使うことで、Reactコンポーネント内で状態(state)を管理することができます。

状態(state)は、コンポーネントが持つデータのことであり、コンポーネント内の変数のようなものです。状態の値が変化すると、Reactは自動的にコンポーネントを再レンダリングしてUIを更新します。

サンプルコード

このコードで解説していきます。
img

解説

まずは、以下のコードでuseStateを定義します。
img
[]内のcountはこの関数の中で使われる変数のようなイメージです。
[]内のsetCountはcountの状態を変化させるための関数です。
useState(0)は、[]内のcountの初期値を設定しています。

img
この関数で、[]内のsetCount関数を呼び出して、count変数を変化させています。
そして、以下のコードでボタンを押した時に、countUp()を呼び出しています。
img
以上のコードで、ボタンを押すたびに、画面が再レンダリングされ、{count}の変数が1ずつカウントアップしていくはずです。

最後に

他にも記事を書いているので、よければご覧ください。

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/269457fe06dbba466d3a
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。