React | Hooksでstateを使う

・クラスの機能(stateやライフサイクル)をファンクショナルコンポーネントでも使える
・100%後方互換＝小さく導入できる

Aシンプルさを保つため

・stateを扱うロジックが複雑
・複数のライフサイクルに副作用の処理がまたがる

・クラスコンポーネントでいうthis.stateとthis.setStateの代替
・ステートフックと呼ばれる
・複数のstateを扱う時はstate毎に宣言

・インポートする

import React, {useState} from "react";

1	import React, {useState} from "react";

・宣言する

isPublished=state変数名
togglePublished=state変更関数名
useState (false);=変数の初期値

 const [isPublished, togglePublished] = useState (false);

1	const [isPublished, togglePublished] = useState (false);

・jsxで使う

 <input type="checkbox" checked={isPublished} id="check" onClick={() => togglePublished(!isPublished)} />

1	<input type="checkbox" checked={isPublished} id="check" onClick={() => togglePublished(!isPublished)} />