Reactの文法と「 useState」の書き方 備忘録

## はじめに
React useStateの備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇


## 内容
React useStateを理解するまでの部分を自分なりにまとめて後で振り返りができるように残してます。

私はこの文法を理解するのに、家の電気のスイッチに例えて理解をしました。


## React文法
基本は
「宣言」→「関数コンポーネント」→「jsx」→「アウトプット」

この流れで記載する。

```jsx:sample.js
import React, { useState } from 'react';

const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');

  const toggleStatus = () => {
    // 現在のstatusに基づいて次の状態を決定
    switch (status) {
      case 'MIN':
        setStatus('真ん中');
        break;
      case '真ん中':
        setStatus('MAX');
        break;
      case 'MAX':
        setStatus('MIN');
        break;
      default:
        setStatus('MIN');
    }
  };

  return (
    <div>
      <p>現在のステータス: {status}</p>
      <button onClick={toggleStatus}>Toggle Status</button>
    </div>
  );
}

export default SwitchComponent;

```

このコードを例にしてセクションごとにまとめる。

### 宣言

```jsx:sample.js
import React, { useState } from 'react';
```

この部分がそれにあたる。
Reactライブラリ全体をインポートする。
{ useState } でusestateフックをインポートする。


:::note warn
usestateとは
* 関数コンポーネントで「状態（state）」を使うために必要
* 「フック」を使うことで関数コンポーネント内で「状態」を扱える。
:::

useStateを利用するシュチュエーション
* ボタンを押して表示を切り替える
* カーソルやクリックすることで動きをつける
などこれらがあった際に使う。


### 関数コンポーネント
「アロー関数型」「function型」の２種類ある。
どちらも少しだけ違うだけど、好みで使用してる。

#### アロー関数型
```jsx:sample.js
const MyComponent = () => {
  // コンポーネントのロジック
  return (
    // JSX
  );
};

```
:::note info
アロー関数型の使用するメリット
* 簡潔に書ける
* Thisの挙動が「外側のスコープ」になる。
:::


#### function型
```jsx:sample.js
function MyComponent() {
  // コンポーネントのロジック
  return (
    // JSX
  );
}

```
:::note info
function型の使用するメリット
* Thisを使えない（使わない）
* newキーワードを使える
:::

### 関数コンポーネント（初期値の定義）
```jsx:sample.js
const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');
```
関数コンポーネントでは
Constで始めて「関数名を決める」
→「アローかfunctionを選択」
→「useStateの初期値,状態を変える（state）,更新した際の状態（setState）を定義」
→「状態を切り替えする動きを定義」

こんな流れで作成する。

```jsx:sample.js
const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');
```

「status」これが家の電球のスイッチ的なもの（これを呼び出せば状態が切り替わる）

「useStatus」これがスイッチを入れた時の電球の状態を指し示すもの
（更新された新しい状態を指し示す）

```jsx:sample.js
  const toggleStatus = () => {
    // 現在のstatusに基づいて次の状態を決定
    switch (status) {  // statusでスイッチを押す
      case 'MIN':  // 今の状態がMINのcaseなら
        setStatus('真ん中');  // 更新された状態は”真ん中”になる
        break;  // 処理を止める
      case '真ん中': // 今の状態が”真ん中”のcaseなら
        setStatus('MAX'); // 更新された状態は”MAX”になる
        break; // 処理を止める
      case 'MAX': // 今の状態が”MAX”のcaseなら
        setStatus('MIN'); // 更新された状態は”MIN”になる
        break; // 処理を止める
      default: // どのcaseにも当てはまらない場合は
        setStatus('MIN'); // 更新された状態は”MIN”になる
```

※「toggle」という言葉は、ある状態を切り替える、特に二つの状態間で交互に切り替える行動を指す。

### jsx
```jsx:sample.js
  return (
    <div>
      <p>現在のステータス: {status}</p>
      <button onClick={toggleStatus}>Toggle Status</button>
    </div>
  );
```
ここは今回は特に解説なし。（別でアウトプット済み）


### アウトプット
```jsx:sample.js
export default SwitchComponent;
```

:::note info
押さえておくべき点🧠
* useStateは状態を変化させたり、動きをつけるときに使う。
* 「宣言」→「関数コンポーネント」→「jsx」→「アウトプット」
:::

## 参考にしたサイト
[#07 新・日本一わかりやすいReact入門【基礎編】頻出するuseStateのケース3選](https://www.youtube.com/watch?v=7MzVcLAtl8g)