2023.01.21 2023.01.31

【React】useStateでリアクティブな値を作っていこう。変数、リスト、オブジェクトも！

momeq

モー

今回は、ReactでのuseStateをみていきます。useStateを使うことで変数をリアクティブに変更していくことができるようになります。

javaScriptのフレームワークである Reactですが、基本的な機能として、今回紹介するuseStateのようなリアクティブな変更が可能という点があります。

その基本がuseStateになります。

基本的なところですが、勉強を続けていくと、必ず出てくるところなので、ぜひ見ていってくださいね。

Contents

基本的な使い方
実際のコードで確認
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

基本は、インポートして、定義、そしてアクセスの３段階で使えます。

注意すべきは、定義のときに配列で値を取ること。左側が値を取得用の変数、右側が値の再セット用の関数になります。

変数名等はなんでも大丈夫ですが、変数名＋ set変数名がよく使われえるので、今回はそれを前提に進めますね。

インポート

import { useState } from “react”

定義

const [変数名, set変数名] = useState<型>(初期値);

＊左側が値を取得用の変数、右側が値の再セット用の関数

アクセス

値の取得 → 変数名でアクセス可能

値の再セット → set変数名（再セットしたい値）

ニャー

最初は、ちょっと混乱するかもだけど、定義の時に左と右で役割があるということがわかれば、すぐになれると思うんだにゃ。

実際のコードで確認

モー

実際のコードを見ておきましょう。ボタンなどで値を動かしたり、変更したりすることが多いと思います。

変数だけでなく、リストやオブジェクトも使えるので覚えておきましょう。

クリックイベント

import React from "react";
import "./App.css"
import { useState } from "react"

export const App = () => {
  const [number, setNumber] = useState<Number>(0);
  const handleClickAdd = () => {
    setNumber((num) => num+1);
  };
  return(
    <div>
      <p>{number}</p>
      <button onClick={handleClickAdd}>Add</button>
    </div>
  )
}

open/close

import React from "react";
import "./App.css"
import { useState } from "react"

export const App = () => {
  const [open, setOpen] = useState<Boolean>(true);
  const handleClickChange = () => {
    setOpen(!open);
  };
  return(
    <div>
      <button onClick={handleClickChange}>Change</button>
      <br />
      <br />
      <p>
        {open ? "open" : "close"}
      </p>
    </div>
  )
}

リストへ追加

import React from "react";
import "./App.css"
import { useState } from "react"

export const App = () => {
  const [list, setList] = useState<Array<String>>([]);
  const [text, setText] = useState<String>("");
  const handleChangeText = (e) => setText(e.target.value);
  const handleClickAdd = () => {
    const newList = [...list, text];
    setList(newList);
  };
  return(
    <div>
      <input type="text" value={text} onChange={handleChangeText}/>
      <button onClick={handleClickAdd}>Add</button>
      <ul>
        {list.map((item) => {
          return <li>{item}</li>
        })}
      </ul>
    </div>
  )
}

オブジェクトを使う

import React from "react";
import "./App.css"
import { useState } from "react"

export const App = () => {
  const [user, setUser] = useState({
          first_name: "", 
          family_name: ""
        });
  const handleChangeFirstName = (e) => {
    setUser({ ...user, first_name: e.target.value })
  };
  const handleChangeFamilyName = (e) => {
    setUser({ ...user, family_name: e.target.value })
  };

  return (
    <div>
      <p><span>名</span><input type="text" value={user.first_name} onChange={handleChangeFirstName}/></p>
      <p><span>姓</span><input type="text" value={user.family_name} onChange={handleChangeFamilyName}/></p>
      <p>{user.first_name} {user.family_name}</p>
    </div>
  );
}

参考：双方向データバインディング