React入門 練習問題 60：フック：DOMの直接操作
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
Reactにおいて、テキスト入力欄のフォーカス制御など、特定のDOM要素に直接アクセスして操作するために主に使用されるフックとして正しいものはどれか。
- useRefフックを使用して、対象の要素のref属性にその参照オブジェクトを渡す方法
- useStateフックを使用して、対象の要素のid属性からDOMを直接検索して操作する方法
- useEffectフックを使用して、画面描画後にdocument.querySelectorを呼ぶ方法
- useContextフックを使用して、対象の要素の属性を全体の状態として一括管理する方法
- useMemoフックを使用して、対象の要素の変更を常に監視し自動でイベントを発火させる方法
正解と解説を見る
正解：useRefフックを使用して、対象の要素のref属性にその参照オブジェクトを渡す方法
特定のDOM要素に直接アクセスしてフォーカスなどを制御する場合、useRefフックを使用して対象の要素のref属性に参照を渡すのが正解です。
【正解の理由】
`useRef`が返すオブジェクトを対象要素の`ref`属性に渡すことで、`ref.current`プロパティを通じてDOMノードのメソッド（`focus()`など）を直接呼び出すことができます。
【不正解の理由】
• 『useStateフックを使用して、対象の要素のid属性からDOMを直接検索して操作する方法』は誤り。`useState`は状態管理用であり、Reactでは直接IDで検索するアプローチは推奨されません。
• 『useEffectフックを使用して、画面描画後にdocument.querySelectorを呼ぶ方法』は誤り。DOMの直接検索はReactのライフサイクルと噛み合わず、バグの原因になります。
• 『useContextフックを使用して、対象の要素の属性を全体の状態として一括管理する方法』は誤り。`useContext`はコンポーネント間でデータを共有するためのものであり、DOMの直接操作とは無関係です。
• 『useMemoフックを使用して、対象の要素の変更を常に監視し自動でイベントを発火させる方法』は誤り。`useMemo`は計算結果をキャッシュするためのフックであり、DOM操作には使用しません。