React: useRef [アウトプット全くしてこなかったのでアウトプットする013]

useRefは前の職場で使うことをほぼ禁止されていたのですが、今の職場では割と使っているので新鮮な気持ちでアウトプットしていきます。

以下は公式に書いてある文

useRef は、.current プロパティが渡された引数 (initialValue) に初期化されているミュータブルな ref オブジェクトを返します。返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。
よくあるユースケースは、子コンポーネントに命令型でアクセスするというものです

import React, { useRef } from "react"

export default function App() {
  const inputEl = useRef<HTMLInputElement>(null);
  const onButtonClick = () => {
    // ボタンをクリックするとインプット属性にフォーカスがあたる
    if(!inputEl.current) return;
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

普通はinput欄をクリックしないと、フォーカスが効かないのですがuseRefを使うことでinput欄にアクセスすることができています。

Just Nowでもくもくかいに参加しているのですが、一瞬どんな仕組みかわからなくなって
「どこでこのinput欄にアクセスしているのですか？」と隣に座っているベテランエンジニアさんに質問してみたところ

const inputEl = useRef<HTMLInputElement>(null);

ここでuseRefの変数を作ってそれを

<input ref={inputEl} type="text" />

ここに渡すことで紐つけているという答えをいただけました!!!

なるほど....

強くなりたい!!!!!!!!!