Next.js-2.React Hooks編-

useReducerとは？useState よりちょっと賢い「状態管理の方法」「どう変えるか？」のルールを reducer という関数にまとめて管理する状態が増えてもスッキリ書ける🐾useReducerの使い方少し複雑ですので、まず実際のコ...

これまで、React HooksのuseState,useEffect,useRefについて学んできました。ここからは発展編ということで、必須ではありませんが、知っておくと便利なHooks（useContext,useReducer）につい...

useRefとは？useRef は React の フック（Hook） の一つで、次のような用途で使われます。✅ ① コンポーネントが再レンダリングされても値を保持する（state とは違い、変更しても再レンダリングしない）✅ ② DOM（...

コンポーネントのアンマウントとは？コンポーネントのアンマウントとは「コンポーネントが画面から削除されること」です。コンポーネントが再レンダリング（マウント）されるということはその都度削除され、更新されているということです。クリーンアップ処理...

useEffectとはこの記事からuseEffectについて見ていきます。useEffect は、コンポーネントが画面に表示されたり（マウント）、更新されたり、消えたり（アンマウント）するタイミングで実行される処理 を定義するための Rea...

useStateで配列を更新しリアルタイムで表示を変える今回はuseStateで配列の値を管理し、それをリアルタイムで表示していきます。今回の書き方は管理者側の更新画面などでReactで頻繁に出てくるものなので、少し複雑ですが頑張っていきま...

useStateでテキスト入力useStateを使って入力したテキストがリアルタイムで表示されるようにしてみましょう。まずはapp/componentsフォルダにtextInput.jsを作成しTextInputコンポーネントを定義します。...

HooksとはReact の Hooks（フック） とは、関数コンポーネントで「状態（state）」や「ライフサイクル」の機能を使うための仕組み です。頻繁に使うHooksの解説をしていきます。useStateHooksの一つであるuseS...