前回までの状態
関数コンポーネントとクラスコンポーネントについて学習した。
今回の目的
- React Hooksについて
- useStateについて
クラスコンポーネントの問題点
クラスコンポーネントを使用すれば、state(状況によって変わる値)を使用した状態の管理が可能。
しかし、クラスコンポーネントには問題点があり(詳細は参考文献参照)、関数コンポーネントでも状態の保存ができるフック機能(React Hooks)が追加された。
React Hooksについて
React Hooksとは、クラスコンポーネントの使用なしに状態管理を可能にするもの。
useState
stateを使用する際に使う。書式は以下の通り。
const [stateの変数名, stateを更新する関数名] = useState(stateの初期値);
作成物
テキストボックスに入力した相手に挨拶するページ。
手順
適当な場所でnpx create-react-appし、React用のプロジェクトフォルダを作る。
npx create-react-app react05 --template typescript
srcフォルダにあるファイルを全て削除し、index.tsxを作成し、以下の内容を書き込む。
import ReactDOM from 'react-dom';
import { useState } from 'react';
const TextOutput = ({ name }: { name: string }) => {
return (
<p>Hello, {name}!</p>
);
}
const TextInput = () => {
const [str, setStr] = useState('初期値');
return (
<div>
<form >
<label>
入力欄<br />
<textarea
value={str}
onChange={event => setStr(event.target.value)}
/>
</label>
</form>
<TextOutput name={str} />
</div>
);
}
ReactDOM.render(
<TextInput />,
document.getElementById('root')
);
いつも通り、npm startでプロジェクトを実行する。
完成品と同じものが表示されれば成功。
解説
import { useState } from 'react';
useStateを使用するため、インポートしている。
const [str, setStr] = useState('初期値');
strというstateを'初期値'で初期化し、setStrという関数でstrを更新することを宣言している。
<textarea
value={str}
onChange={event => setStr(event.target.value)}
/>
str('初期値')が値として入っているテキストエリアで、入力欄に変更があった場合、setStr()によってstrがevent.target.valueに変更される。
要約
関数コンポーネントで状態管理を行う場合、React Hooksを使用する。
useStateで状態管理用の変数と値更新用の関数名を宣言できる。