useRef

렌더링에 필요하지 않은 값을 참조할 수 있는 Reack Hook

 

import { useRef } from 'react';

const ref = useRef(initialValue);

 

initialValue : ref 객체의 current 프로퍼티 초기 설정값

 

useRef 란?

리렌더링을 유발하지 않으면서 값을 저장하고 유지할 수 있는 방법을 제공한다.

예를 들어, useRef 로 저장된 값이 변하더라도 컴포넌트가 리렌더링되지 않아 성능면에서 유리하다.

 

반환값

useRef 는 단일 프로퍼티를 가진 객체를 반환한다.

 

관련하여

브라우저 API에서 제공하는 document.querySelector() 와 비슷한 역할을 한다.

React 에서는 직접 document 를 사용하는 것보다 useRef를 사용하는 것이 권장되는데,

useRef 가 React의 가장 DOM과 일관성 있게 작업할 수 있으며 React 의 선언적 방식에 적합하기 때문이다.

 

 const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  };

 

위와 같이 .current 를 사용하여 상호작용할 수 있다.

 

 

출처 및 참고 https://ko.react.dev/reference/react/useRef