Kobashi ロゴ

ニュース詳細detail_idだお

Reactのメモ
Reactのメモ

具体的な「サイト上の場所」で答えます。

Reactフックは、次のような画面や機能部分で使われる場合があります。

■ ヘッダー・ナビゲーション

* ハンバーガーメニューの開閉 → useState

* スクロールに応じてヘッダーを縮小 → useEffect + useState

* 現在のタブ選択状態 → useState

■ フォーム(問い合わせ・ログインなど)

* 入力値の管理 → useState

* 送信時のバリデーション処理 → useState

* 送信後にAPI呼び出し → useEffect

* エラーや送信中フラグ → useState

■ 商品一覧・記事一覧ページ

* APIからデータ取得 → useEffect

* 読み込み中スピナー表示 → useState

* 絞り込みや検索キーワード → useState

* 無限スクロール → useEffect + useRef

■ 詳細ページ(商品詳細・記事詳細など)

* お気に入り追加ボタン状態 → useState

* 閲覧履歴保存 → useEffect

* 画像ギャラリーの選択 → useState

■ モーダルやポップアップ

* 開く・閉じる状態 → useState

* 外クリックで閉じる処理 → useEffect + useRef

■ ランキング・おすすめ表示

* 計算の重い並び替え → useMemo

* 並び替えボタンのクリック関数 → useCallback

■ マイページ・ログイン状態

* ユーザー情報の共有 → useContext

* テーマ切り替え(ダーク/ライト) → useContext

■ アニメーション・スクロール連動表現

* スクロール位置の追跡 → useEffect + useState

* 要素の参照 → useRef

まとめ

* 使う場所 = 具体的なUI部品

* 使う目的 = 状態管理とデータ取得、副作用処理




前の記事次の記事