【ISSUE】【React】useStateについて
2024年12月23日 8:40
備忘録がてら、Reactの基礎であるuseStateについて書いていきます。
useStateは、Reactフレームワークで提供されるフック(Hook)の一つです。useStateフックを使うことで、Reactコンポーネント内で状態(state)を管理することができます。
状態(state)は、コンポーネントが持つデータのことであり、コンポーネント内の変数のようなものです。状態の値が変化すると、Reactは自動的にコンポーネントを再レンダリングしてUIを更新します。
このコードで解説していきます。
まずは、以下のコードでuseStateを定義します。
[]内のcountはこの関数の中で使われる変数のようなイメージです。
[]内のsetCountはcountの状態を変化させるための関数です。
useState(0)は、[]内のcountの初期値を設定しています。
この関数で、[]内のsetCount関数を呼び出して、count変数を変化させています。
そして、以下のコードでボタンを押した時に、countUp()を呼び出しています。
以上のコードで、ボタンを押すたびに、画面が再レンダリングされ、{count}の変数が1ずつカウントアップしていくはずです。
他にも記事を書いているので、よければご覧ください。
https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc
https://qiita.com/hukuryo/items/265c676d17fe21e75242
https://qiita.com/hukuryo/items/269457fe06dbba466d3a
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。