【React】useRefでDOMを操作する

はじめに

チェスアプリを実装していて、初めてuseRefを使ったので、調べたことを備考録としてまとめました。

useRefとは

useRefhookを使うと、更新しても再レンダリングが発生せず、変更可能な値を保持しつつ、
DOM要素に直接アクセスすることができます。^[1]

const ref = useRef(initialValue)

DOM操作の手順

1. 初期値をnullとするrefオブジェクトを宣言

値を参照するには、コンポーネントのトップレベルでuseRefを呼び出し、refを宣言します。

import { useRef } from 'react';

function Chessboard() {
  const chessboardRef = useRef<HTMLDivElement>(null);
  // ...

2. 操作したいDOMノードのJSXに、refオブジェクトをref属性として渡す

DOMノードを作成し画面に表示した後、ReactはrefオブジェクトのcurrentプロパティをそのDOMノードに設定します。この時点で、DOMにアクセスしたり、関数を呼び出したりできます。

return (
    <div
     ...
     ref={chessboardRef}
    >{board></div>
 )

全体のコード

import { useRef } from 'react';

function Chessboard() {
  const chessboardRef = useRef<HTMLDivElement>(null);
  // ...
  return (
    <div
     ...
     ref={chessboardRef}
    >{board></div>
  )

useRefは、指定された初期値に初期設定された1つのcurrentプロパティを持つrefオブジェクトを返します。
試しに、console.log(chessboardRef)で出力してみると、以下のようにcurrentプロパティを持つrefオブジェクトがreturnされます。

参考

useRef
Manipulating the DOM with a ref

脚注

1. refを変更しても再レンダリングは行われないので、画面に表示する情報を保存するにはrefは適していません。その場合は、stateを使用します。
   useRefとuseStateの使い分けについて