Zenn
✡️

useStateを理解する

2023/10/09に公開
React
初心者
useState
tech

はじめに

最近、Reactの勉強を始めました。わからないことが多いので、勉強の記録もかねてまとめようと思います。今回はuseStateについて理解をするために簡単なカウントアップのアプリを作りたいと思います。

useStateとは

useStateとはReact Hookのひとつで、コンポーネントに状態変数を追加することができるようになります。
以下のように宣言します。

const [state, setState] = useState(initialState);

実際に使ってみる。

今回は以下のような簡単なものを作ります。

incrementボタンをクリックすると数字が１増加し、decrementボタンをクリックすると数字が１減少します。

App.js
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="tutorial">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default App;

import { useState } from "react";

useStateフックをインポートしています。

const [count, setCount] = useState(0);

useStateフックを使用して、countという名前の状態変数と、その状態を更新するための関数であるsetCountを定義しています。初期値としては０を設定しています。

  return (
    <div className="tutorial">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );

コンポーネントがレンダリングする内容を定義しています。IncrementのボタンをクリックするとonClickで定義されているイベントが発火し、countの値が１増加します。Decrementのボタンをクリックするとその逆で、countの値が１減少します。

index.css
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.tutorial {
  text-align: center;
}

.tutorial button {
  margin: 0 10px;
}

cssを編集して見た目を整えていきます。

おわりに

今回はuseStateに関してまとめました。他のものに関してもまとめていきたいと思っています。

参考文献

useState

Discussion