userefの使い方と特性

const ref = useRef(value)は、userRefがref内のオブジェクトを返すことをこのように宣言する.この形態は{ current: value }です.そしてこの変数はいつでも変更できます.例えば、ref.current = "hello"の値は、要素のライフサイクル全体を通して、要素がunmountである前に維持される.

userefはいつ使用しますか?また、なぜ使うのでしょうか。

代表的なケースは2つあります.

usStateと同様に、ストレージスペースとして使用されます.しかし、違いもあります.

USStateの場合、値が変更された場合は리렌더링이 일어나고 컴포넌트 내부의 변수들이 초기화 된다.、usRefの場合は값이 변하더라도 렌더링이 일어나지 않고 변수들의 값이 그대로 유지가 된다.となり、不要なレンダリングがブロックされます.また,他のuseStateの値が変化しても,useRefの値は変わらない.결국 값이 변경될때 렌더링이 일어나지 않아야 하는 값에 userefを使用します.
これらのフィーチャーを使用してuserEffectを使用する場合、userStateを使用すると値が変化し、新しいレンダリングが生成され、userEffectが再有効になるため、무한루프に陥るという問題が発生します.これを防止するためにuserefを使用するのは、値が変化してもレンダリングが発生しないため良いです.

DOM要素にアクセスした場合.
最も代表的なのは、inputタグをクリックしなくてもフォーカスが得られるように設定されていることです.
サンプルコードは次のとおりです.

import React, { useEffect, useRef } from "react";

export default function UseRef() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  const onClickBtn = () => {
    alert(`로그인아이디: ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" placeholder="아이디" />
      <button onClick={onClickBtn}>로그인</button>
    </>
  );
}

このコードは、最初のレンダリングが完了した後、inputラベルに포커싱に設定し、ログインボタンをクリックし、inputラベルに포커싱に再設定します.
ここには好奇心があるこれは、通常の変数宣言とuserefを使用する変数宣言と区別されませんか?차이가 있다.の関数型要素の場合、新しい関数が呼び出されると(レンダリングされる場合)、일반적인 변수선언의 경우 그 값이 초기화 되지만およびuseRef를 사용한 변수는 그대로 유지되는 차이가 있다.(要素のライフサイクル全体にわたって値が保持されるため)!したがって、変数を安全に管理できます.