ReactのuseRefについて

useRefとは

紹介

useRef は React の Hook の一つで、関数コンポーネント内で参照（reference）を作成するために使用されます。
通常、DOM要素にアクセスしたいときに使われますが、状態の管理にも使用することができます。useRef はコンポーネントの再レンダリングをトリガーしません。

使用方法

useRef を使うと、DOM要素に対して直接アクセスできる「ref」を作成することができます。
useRef はオブジェクトを返し、その current プロパティを通じて参照したい要素にアクセスできます。

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

### 特徴
- useRef の値は再レンダリングを引き起こしません。
- コンポーネントが再レンダリングされても、ref の値は保持されます。
- 状態としての管理には useState を使用し、useRef は主に DOM 操作やその他の参照を管理するために使用されます。