【React】useRefの使い方
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- react:18.2.0
- react-dom:18.2.0
ReactのuseRefとは
useRefは、レンダー時には不要な値を参照するためのReact Hookです。 Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行いDOM 要素へのアクセスや状態の保持するために使用されます。 公式ドキュメント:https://ja.react.dev/reference/react/useRef
useRefの基本構文
useRefの基本構文は以下の通りです。
1const myRef = useRef(initialValue);
useRefの使い方
useRefの具体的な使い方を説明していきます。
1// App.js 2import './App.css'; 3import React, { useRef, useEffect, useState } from 'react'; 4 5function App() { 6 // useRef フックを使用して、input 要素への参照を作成 7 const inputElement = useRef(); 8 9 // useState フックを使用して、テキストの状態を管理 10 const [text, setText] = useState(""); 11 12 // ボタンがクリックされたときに、入力されたテキストを取得して状態を更新する関数 13 const handleClick = () => { 14 setText(inputElement.current.value); 15 }; 16 17 // コンポーネントがマウントされたときに、input 要素にフォーカスを設定 18 useEffect(() => { 19 inputElement.current.focus(); 20 }, []); // 第2引数の空の配列は、この useEffect を最初のレンダリング時にのみ実行することを示します 21 22 return ( 23 <div> 24 <h1>React Hooks Tutorial</h1> 25 <hr /> 26 <h2>useRef</h2> 27 {/* input 要素への参照を inputElement に設定 */} 28 <input ref={inputElement} type="text" /> 29 {/* ボタンがクリックされたときに、handleClick 関数を実行 */} 30 <button onClick={handleClick}>入力内容を確認する</button> 31 {/* 入力されたテキストを表示 */} 32 <p>テキスト : {text}</p> 33 </div> 34 ); 35} 36 37export default App;
インポート文
1// インポート文 2import React, { useRef, useEffect, useState } from 'react';
Reactとフック(useRef、useEffect、useState)をインポートしています。
useRefで参照を作成
1// useRefで参照を作成 2const inputElement = useRef();
useRefフックを使用して、input要素への参照を作成します。
useStateで状態を管理
1// useStateで状態を管理 2const [text, setText] = useState("");
useStateフックを使用して、textという状態変数とその更新関数setTextを作成します。
handleClick関数
1// handleClick関数 2const handleClick = () => { 3 setText(inputElement.current.value); 4};
ボタンがクリックされたときに実行される関数ですが、inputElementの現在の値を取得して、textの状態を更新します。
useEffectで初回フォーカス設定
1// useEffectで初回フォーカス設定 2useEffect(() => { 3 inputElement.current.focus(); 4}, []);
コンポーネントが初めてレンダリングされたときに、input要素にフォーカスを設定します。 空の依存配列[]を渡すことで、このuseEffectが初回レンダリング時にのみ実行されることを示しています。
return文でのUI構築
1// return文でのUI構築 2return ( 3 <div> 4 <h1>React Hooks Tutorial</h1> 5 <hr /> 6 <h2>useRef</h2> 7 <input ref={inputElement} type="text" /> 8 <button onClick={handleClick}>入力内容を確認する</button> 9 <p>テキスト : {text}</p> 10 </div> 11);
input要素にref属性を設定し、inputElement参照を関連付けます。 そして、ボタンをクリックするとhandleClick関数が実行され、入力されたテキストがtext状態変数として表示されます。
おわりに
ReactのuseRefの使い方について説明してきましたが、いかがだったでしょうか。 useRefによってDOMの参照がしやすくなり、useRefの値が変更されてもコンポーネントは再レンダリングされないため、パフォーマンスの向上が期待できます。 ぜひ、ReactフックのuseRefを使いこなして、効率的なReactアプリケーションを作成しましょう。