Hook(3): useRef

userefを使用してDOMノードまたはReactエイリアスにアクセス

JavaScriptから特定のDOMを選択する必要がある場合は、DOMセレクタを使用します.反応器には、特定の元素の大きさを取得したり、焦点を設定したり、特定のDOMを選択したりする必要がある場合もある.
この場合、反応関数型素子は、反応hookの1つとしてuseref関数を使用する.
クラス構成部品はコールバック関数を使用することも、コールバック関数を使用することもできます.createRef関数を使用します.

使用方法

最初にRefオブジェクトを作成します.

const element = useRef();

ref値を選択するDOMのプロパティに設定します.

<input onChange={onChange} value={text} ref={element} />

Refオブジェクトの現在の値は、私たちが選択したDOMです.したがって、現在の値に使用したいDOM APIが呼び出される.
(DOM API:JavascriptでHTMLを制御する各種コマンド)

element.current.focus();

使用例

初期化ボタンを押してinputラベルの値とフォーカスを初期化する機能を実現しました.

import React, {useState, useRef} from 'react';

const useRefPrac = (initialText) => {
  const [text, setText] = useState(initialText);
  const element = useRef();
  
  const onChange = (e) => {
    const {target:{value}} = e;
    setText(value);
  }

  const onReset = (e) => {
    e.preventDefault();
    setText('');
    element.current.focus();
  }

  return {text,element, onReset, onChange};
}
 
const App = () => {
  const {text, element, onReset, onChange} = useRefPrac("text를 입력하세요");
  return(
    <div className="App">
      <input onChange={onChange} ref={element} value={text}/>
      <button onClick={onReset}>초기화</button>
    </div>
  )
}

export default App;

before

after

userefを使用して構成部品の変数を管理する

useref hookはDOM選択に加えて、コンポーネント内のクエリー可能および変更可能な変数を管理するために使用されます.userefを使用して変数を管理する場合、変数の更新時に構成部品は再レンダリングされず、構成部品のレンダリング時にも変数の値は初期化されません.したがって、userefとして定義された変数は常に安定しているため、参照変数を実行するたびに現在(最新)の値を常に参照することができます.
userefを使用する変数は、次の場所で使用されます.

settimeout、setIntervalによって作成されたid

転動位置

アレイに新規アイテムを追加するときに必要なユニーク値キー

例

import React, {useState, useEffect, useRef} from 'react';
import UserList from "./UserList";

function App(){
  const users = [
    { id:1, username: 'henry', email: '[email protected]' },
    { id:2, username: 'malia', email: '[email protected]' },
    { id:3, username: 'tomson', email: '[email protected]'}
  ];

  const nextId = useRef(4);
  const onCreate = () => {

    //배열에 새로운 항목 추가하는 로직 생략

    nextId.current += 1;
  };
  return <UserList users={users}/>;
}

export default App;

useref()関数を使用してnextIdを一意の値変数に設定し、パラメータとして数値4を追加します.
したがって、パラメータとしての値は変数の現在の値となります.nextId変数を変更またはクエリーするには.現在の値を変更または照会します.
その他の例:useCallbackで使用されるuseRef変数

userefを使用してsetInterval、setTimeout関数をクリアする

setIntervalやsetTimeoutのような関数はクリアしないとメモリが大量に消費されます.したがって、関数を実装し、構成部品をアンインストールしたり、場合によってはクリアしたりする必要があります.
例

function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
      //컴포넌트가 unmount될때 clearInterval을 활용해서 
      //setInterval함수가 들어있는 ref객체를 초기화해준다.
    };
  });

  // ...

Intervalまたはtimeoutを設定するにはrefは必要ありませんが、設定をクリアするときに便利です.

注意事項

refpropについては,HTML要素を直接制御することは,jQuery時代に主に用いられたコマンド(コマンド型)方式のWebプログラミングであることに注意が必要である.Declarative(宣言型)プログラミングモードに基づくReactを含む現代のJavaScriptライブラリでは、必須でない場合は、この方法を採用しないほうがよい.
[ソースとコメント]
ko.reactjs
xiubindev.tistory
DaleSeo/react-refs