Reactにデフォルトで採用されている便利機能React Hook。 今回は最も使用頻度の高い「useState」と「useEffect」についてまとめた。
useStateの概要
useStateとはReactで変数を扱うときに使用するReact Hookである。 Reactで変数を扱う場合は他の言語のように「=」で値を代入するかたちではなく、このuseStateを用いることがほとんど。
useStateの使い方
useStateを使う場合は以下のような手順を踏む。
以下、サンプルコード
import { useState } from 'react'; function App() { const [input, setInput] = useState(""); return ( <> <div> <h1>{input}</h1> </div> <div> <input type="text" onInput={(e) => setInput(e.target.value)} /> </div> </> ); } export default App;
具体的な内容としてここでは...
- テキストボックスに入力があるとonInputイベントが発生
- onInputの中でsetInput関数が実行され変数inputに入力値(e.target.value)をセット
- 入力値がセットされた変数inputをh1タグで表示
という手順でuseStateを使用している。
useEffectの概要
useEffectとはReact内で特定の値に動きがあった際に作用する副作用を設定するReact Hookである
useEffectの使い方
まずはサンプルコード(useStateのサンプルコードに追記したもの)
import { useState, useEffect } from 'react'; function App() { const [input, setInput] = useState(""); useEffect(() => { console.log("入力"); }, [input]); return ( <> <div> <h1>{input}</h1> </div> <div> <input type="text" onInput={(e) => setInput(e.target.value)} /> </div> </> ); } export default App;
useStateと同様に1行目でimportした後、Appファンクション内でuseEffectを使用している。 useEffectは第2引数(配列)に指定したステータスに変化があると第1引数の関数が実行されるというもの。 ここでは変数inputが更新される(テキストボックスに入力がある)とuseEffect第1引数の関数が実行される(コンソールに「入力」と表示される)。 なお、画面表示時に1度だけ実行したい場合は第2引数を空配列にする。