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

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

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

## サンプルコード
このコードで解説していきます。
![img](/mosaic-code.jpg)

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

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

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

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

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

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

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

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

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

## サンプルコード
このコードで解説していきます。
```
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const countUp = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={countUp}>カウントアップ</button>
    </div>
  );
}
```

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

```
const countUp = () => {
    setCount(count + 1);
  };

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

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

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

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

https://qiita.com/hukuryo/items/269457fe06dbba466d3a
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

useStateとは

続きを読むには単価診断を受けてください（30秒）