ReactのuseRefフックを使ったDOM操作の基礎

この記事では、ReactのuseRefフックを使ったDOM操作の基本を紹介します。useRefを使ってDOM要素にアクセスし、ユーザーインタラクションに応じた動的な処理を行う方法を学びます。また、useRefを使ってコンポーネント内で状態を保持する方法も解説します。

useRefとは？その役割と基本

useRefは、Reactのフックの1つで、DOM要素に直接アクセスするために使用されます。`useState`とは異なり、useRefで保持する値が変更されても再レンダリングは発生しません。

  
  const inputRef = useRef(null);
  

useRefを使ったDOM操作の例

useRefを使って、DOM要素にアクセスし、ユーザーがボタンをクリックしたときに入力フィールドにフォーカスを与える例を見てみましょう。

  
  function TextInputWithFocusButton() {
    const inputRef = useRef(null);

    const handleClick = () => {
      inputRef.current.focus();
    };

    return (
      

        
        Focus the input
      
    );
  }
  

useRefで状態を保持する方法

useRefは、コンポーネントの状態を保持するためにも利用できます。例えば、useRefを使って、コンポーネントの間である変数の値を保持し続けることができます。

  
  function Timer() {
    const timerIdRef = useRef(null);

    const startTimer = () => {
      timerIdRef.current = setInterval(() => {
        console.log('Timer is running');
      }, 1000);
    };

    const stopTimer = () => {
      clearInterval(timerIdRef.current);
    };

    return (
      

        Start Timer
        Stop Timer
      
    );
  }
  

ReactのuseRefフックを使ったDOM操作の基礎のまとめ

この記事では、ReactのuseRefフックを使ったDOM操作の基本について学びました。useRefを使ってDOM要素にアクセスし、また状態を保持することで、効率的なReactアプリケーションの開発を実現しましょう。