[React] useRef 란?

useRef 란?

useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다. 그리고 useRef는 값이 바뀌어도 리렌더링 하지 않는다. 컴포넌트의 속성만 조회 & 수정한다.

사용하는 경우

• focus, text selection, media playback을 관리
• 애니메이션을 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

  값이 바뀔 때마다 렌더링이 필요한 상황에서 useState를 사용하고 그렇지 않을 경우 useRef 를 사용하면 된다고 생각하면 될 것 같다.

사용법

import { useRef } from 'react';

const App = () => {
  const ref = useRef();

  return <input type="text" name="keyword" ref={ref} />;
};

useRef로 컴포넌트 안의 변수 관리

useRef는 DOM선택 목적 외에도 변수관리를 목적으로 사용하기도 한다. 주로 변수 리렌더링이 데이터 저장은 필요하지만 리렌더링이 필요하지 않은 경우 많이 사용된다.

• setTimeout, setInterval을 통해 만들어진 id
• scroll 위치
• 배열에 새 항목을 추가할 때 필요한 고유값 key