useRef Hook 사용하기

• 리액트에서 DOM 앨리먼트의 주소값을 활용해야 하는 경우, useRef가 필요하다.
• focus, text selection, media playback, 애니메이션의 적용이나 d3.js, greensock 등과 같은 DOM 기반 라이브러리 활용할때 useRef가 필요하다.
• useRef를 사용하면, DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다.
• useRef는 리액트의 특징인 선언적 프로그래밍 원칙을 위반할 우려가 있기에 꼭 필요한 곳에만 조심하여 사용해야 한다.

import React, { useRef } from "react";

function UsingRef() {
  const inputElement = useRef(null);
  const onButtonClick = () => {
    inputElement.current.focus();
  };
  return (
    <>
      <input ref={inputElement} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 위의 코드는 버튼을 클릭하면, input 창에 focus가 가게 한다.

import { useRef } from "react"; 로 useRef를 불러온다.

참고자료 : 코드 스테이츠