React hooksのuseStateについて調べてみた

■はじめに

こんにちはiimonでフロントエンドエンジニアをしている「奥島」です！

■Reactとは

Reactとは：UI 構成開発のためのライブラリだよ！コンポーネントを組み合わせてWEB画面を作っていくのが特徴だよ！！
コンポーネント：Reactで画面に表示される部品のことで、表示に必要なデータや処理などを1つのオブジェクトにまとめたものです。画面に表示するための部品を作ることによって、いつでも簡単に組み込むことで部品を再利用することができます。

■コンポーネントは大きく二種類あります

クラスコンポーネント
関数コンポーネント
なぜコンポーネントを使うのか： Reactのコンポーネントは、繰り返し利用可能なコードのブロックのようなものです一度作成すれば、様々な場所で簡単に再利用できます。ボタンなど、共通するパーツをコンポーネント化しておくことで、新しいボタンが必要になったときに記述の追加をする必要がなくなります。コードが簡潔になる

■フックとは

クラスコンポーネントでしか使えなったもstateが関数コンポーネントで使えるようになり値を管理することができるようになりました。

状態(state)：コンポーネント内で管理する変数のことです

■useStateを使ってみる

この呪文で実行できます！！ - npx create-react-app my-app

import './App.css';
import { useState } from 'react';

function App() {
  // useStateの基本形
  // const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
  const [count, setCount] = useState(0);
  // 状態変数 == count
  // 状態を変更するための関数 == setCount
  // 状態の初期値 == 0

  const handleClick = () => {
  // 状態を変更するための関数を呼び出すことで状態を変更できる
    setCount(count + 1);
  }

  return (
    <div className="App">
      <h1>useState</h1>
      <button onClick = {handleClick}>+</button>
      <p>Count: {count}</p>

    </div>
  );
}

export default App;

画面はこんな感じです！！

■参考URL

【React】フック(Hook)を学ぼう！ #初心者 - Qiita

React Hooksの第一歩【状態管理】 #TypeScript - Qiita

React(Next)でなぜコンポーネントを使うか #JavaScript - Qiita

コンポーネント指向のススメ #初心者 - Qiita

【React】stateとは #JavaScript - Qiita

まとめ

今回はReact hooksのuseStateについて調べてみました。業務では使わない技術なので色々と学ぶことができてよかったです useState以外にuseEffect、useContext、useReducer、useRef、などたくさんあるので他のhooksも学んでみたいと思いました。