React에서 useRef의 구체적인 사용

React 사용 경험이 있는 사람들은 ref에 익숙할 것입니다. 구성 요소의 실례 대상이나 DOM 대상을 얻을 수 있습니다.
한편,useRef라는 hooks 함수는 전통적인 사용법을 제외하고는'크로스 렌더링 주기'로 데이터를 저장할 수 있다.
우선 그것의 전통적인 용법을 살펴보자.

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

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
    console.log(couterRef.current);
  }, [count]);
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

코드에서useref로couterRef 대상을 만들고 button의ref 속성을 부여합니다.이렇게 하면 couterRef에 액세스할 수 있습니다.current는 button에 해당하는 DOM 객체에 액세스할 수 있습니다.
그리고 데이터를 저장하는 방법을 다시 한 번 봅시다.
하나의 구성 요소 중 어떤 것이 렌더링 주기를 뛰어넘을 수 있습니까? 즉, 구성 요소가 여러 번 렌더링된 후에도 변하지 않는 속성입니까?첫 번째로 생각한 것은state일 것이다.맞아요. 구성 요소의state는 여러 번 렌더링한 후에도 변하지 않습니다.그러나state의 문제는 수정되면 구성 요소를 다시 렌더링하는 데 있습니다.
그러면 이 때useRef를 사용하여 렌더링 주기를 뛰어넘어 데이터를 저장할 수 있고 수정해도 구성 요소의 렌더링을 일으키지 않습니다.

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

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const timerID = useRef();
  
  useEffect(() => {
    timerID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  useEffect(()=>{
      if(count > 10){
          clearInterval(timerID.current);
      }
  });
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

위의 예에서, 나는 ref 대상의current 속성으로 타이머의 ID를 저장합니다. 이렇게 하면 여러 번 렌더링한 후에도 타이머 ID를 저장하여 타이머를 정상적으로 제거할 수 있습니다.
이 React에서 use Ref의 구체적인 사용에 관한 글은 여기 소개되어 있습니다. 더 많은 React use Ref 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!