useRefとは
1.関数コンポーネント内で『Ref』を作成し、利用できるようにするためのhook
『useRef』フックを使うと、『ref』オブジェクトを生成できる。
この『ref』オブジェを対象の DOM ノード（ HTMLタグ）の『ref』属性に設定すると、 ref オブジェクト経由で DOM 操作できるようになる。
Refとは
DOMノードもしくはReactの要素にアクセスする機能のこと。
例えば
① 要素の幅や高さを取得して、それを元に動的に要素のスタイルを変更する
② ボタンを押すとある要素にフォーカスする
等のように各要素にアクセスして得た情報を元に別の動作を実現することができる
2.useStateと同様に変数に値を保存することもできる
useState ⇨ 値が更新されると再描画される
useRef ⇨ 値が更新されても再描画されない
import React, { useRef } from "react";
//JavaScript
// 基本
const refObject = useRef(initalValue);
// useRefを状態保持を目的に使う場合は、引数に数字や文字列などを設定
const refObject = useRef(0);
// useRefをDOM操作のために使う場合は、引数にnullを設定
const refObject = useRef(null);
//TypeScript
// 基本
const refObject = useRef<Type>(initalValue);
// useRefを状態保持を目的に使う場合は、引数に数字や文字列などを設定
const refObject = useRef<number>(0);
// useRefをDOM操作のために使う場合は、引数にnullを設定
// inputタグをDOM操作したい場合
const refObject = useRef<HTMLInputElement>(null);
// buttonタグをDOM操作したい場合
const refObject = useRef<HTMLButtonElement>(null);
// divタグをDOM操作したい場合
const refObject = useRef<HTMLDivElement>(null);