Next.js-2.React Hooks編- Reace Hooks その⑦ 発展編（任意）
これまで、React HooksのuseState,useEffect,useRefについて学んできました。ここからは発展編ということで、必須ではありませんが、知っておくと便利なHooks（useContext,useReducer）につい...
kohei
Next.js-2.React Hooks編- Next.js-2.React Hooks編- Reace Hooks その⑥
useRefとは？useRef は React の フック（Hook） の一つで、次のような用途で使われます。✅ ① コンポーネントが再レンダリングされても値を保持する（state とは違い、変更しても再レンダリングしない）✅ ② DOM（...
Next.js-2.React Hooks編- Reace Hooks その⑤
コンポーネントのアンマウントとは？コンポーネントのアンマウントとは「コンポーネントが画面から削除されること」です。コンポーネントが再レンダリング（マウント）されるということはその都度削除され、更新されているということです。クリーンアップ処理...
Next.js-2.React Hooks編- Reace Hooks その④
useEffectとはこの記事からuseEffectについて見ていきます。useEffect は、コンポーネントが画面に表示されたり（マウント）、更新されたり、消えたり（アンマウント）するタイミングで実行される処理 を定義するための Rea...
Next.js-2.React Hooks編- Reace Hooks その③
useStateで配列を更新しリアルタイムで表示を変える今回はuseStateで配列の値を管理し、それをリアルタイムで表示していきます。今回の書き方は管理者側の更新画面などでReactで頻繁に出てくるものなので、少し複雑ですが頑張っていきま...
Next.js-2.React Hooks編- Reace Hooks その②
useStateでテキスト入力useStateを使って入力したテキストがリアルタイムで表示されるようにしてみましょう。まずはapp/componentsフォルダにtextInput.jsを作成しTextInputコンポーネントを定義します。...
Next.js-2.React Hooks編- Reace Hooks その①
HooksとはReact の Hooks（フック） とは、関数コンポーネントで「状態（state）」や「ライフサイクル」の機能を使うための仕組み です。頻繁に使うHooksの解説をしていきます。useStateHooksの一つであるuseS...
Next.js-1.構築編- Next.js構築 その⑩
スプレッド構文とはスプレッド構文について説明します。スプレッド構文は配列やオブジェクトを「展開」する機能を持ちます。まずは下記のようなpersonというオブジェクトがあったとします。const person = { name: "Alice...
Next.js-1.構築編- Next.js構築 その⑨
propsを使ってデータを渡そう今回はコンポーネント間でデータを受け渡す方法について見ていきます。Propsとはprops（プロップス）は、親コンポーネントから子コンポーネントへデータを渡す仕組みです。親から子へ一方向に渡されるデータで、子...
Next.js-1.構築編- Next.js構築 その⑧
Javascriptの扱い方これまでWebページを構成するHTML(JSX)、CSS、画像ファイルの使い方を見てきました。もう一つWebページに欠かせないJavascriptの扱い方について見ていきましょう。まずは今回記述する内容のためのコ...