document.getElementByIdのReact版って何？ #React

業務で元々はJavaScriptやjQueryを書いていましたが
新しくReact+TypeScriptで書くことになり表題の件で躓きました。
以下実装時に使用したものと解説を書きます。

ズバリ使うのは、Ref！！！

RefはDOM操作に役立つReactのAPIです。Hooksで追加されたのがuseRefになります。
基本的にReactでDOM操作を行おうと思ったとき、ピュアJavaScriptのdocument.getElementById、document.querySelector系のAPIは使用できません。というよりもidを使用すること自体がNGだそうです。
idをもつということはReactが最終的なbundle.jsとして吐き出した際に、idが重複したものが出力される可能性があるためです。
そういったことからidの使用はアンチパターンといえそうです。
そこでReactでは代替えとしてref属性からDOMを参照し、操作を行います。

例. フォームに入力された値をボタンタグのクリックイベントで取得

例

import React, { useRef, MouseEvent } from 'react'; // ①useRef追加

const personZipcode = () => {
    const textRef = useRef<HTMLInputElement>(null);　　// ②nullで初期化
    const onClickEvent = (e: MouseEvent<HTMLButtonElement>) => {
        if (!textRef.current) return;　// ④nullでないことを確かめる
        let zipCode = textRef.current.value;　// ⑤入力値取得
        console.log(zipCode);
    }

    return (
        <>
            <p>
                <label>
                    〒
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{/* ③ref属性追加 */}
                    <input type='text' name='personZipcode' placeholder='例）1030015' ref={textRef}/>
                </label>
                <button type='button' onClick={onClickEvent}/>
            </p>
        </>
    )
}

export default personZipcode;

解説

①useRef追加
②refを定義し、初期値にnullを持たせる。これはレンダリングする前の初期値
③ref属性追加
④useRefにnullを渡してHTMLInputElementで型づけると、
　そのcurrentプロパティ(Input)はHTMLInputElement | nullのユニオン型で推論されます。
　すると、要素の参照として扱う前に、必ずnullでないことを確かめなければなりません。
　そうしなければ、「オブジェクトは 'null' である可能性があります。」というエラーが示されてしまいます。
⑤入力値取得

備考

今回はrefを使用し、フォームに入力された値を取得しましたが
下記の記事を参考にするとdocument.getElementByIdでも値は取得できます。
https://qiita.com/Sekky0905/items/a88721f2af41050c93f2

参考文献

下記サイトが非常にわかりやすく解説されています。
ぜひご一読ください。

・https://ryotarch.com/javascript/react/control-react-dom-with-ref/
・https://qiita.com/FumioNonaka/items/feb2fd5b362f2558acfa