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


今回は、ReactでのuseStateをみていきます。useStateを使うことで変数をリアクティブに変更していくことができるようになります。
javaScriptのフレームワークである Reactですが、基本的な機能として、今回紹介するuseStateのようなリアクティブな変更が可能という点があります。
その基本がuseStateになります。
基本的なところですが、勉強を続けていくと、必ず出てくるところなので、ぜひ見ていってくださいね。
基本的な使い方
基本は、インポートして、定義、そしてアクセスの3段階で使えます。
注意すべきは、定義のときに配列で値を取ること。左側が値を取得用の変数、右側が値の再セット用の関数になります。
変数名等はなんでも大丈夫ですが、変数名 + 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>
);
}
プログラミングを学ぶならTechAcademy(テックアカデミー)がおすすめ!

独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。
- オンラインで選抜された現役エンジニアから学ぶことができる
- 自宅からWeb制作・プログラミング・アプリ開発など幅広い分野を学べる
- 学ぶだけではなく、転職の支援、副業に活かせるスキルの習得、副業の仕事紹介まで行っている

無料体験や相談もあるから、一度試してみてもいいんだにゃ!
\無料体験、無料相談はこちらから/