useRef

useRef? 🤔

useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.

React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 된다. 하지만 그에 따른 부작용으로 함수 내부의 변수들이 기존에 저장하고 있는 값들을 잃어버리고 초기화된다. 간혹 다시 랜더링이 되더라도 기존에 참조하고 있던 컴포넌트 함수 내의 값이 그대로 보존되야 하는 경우가 있는데 이럴 때 사용하는 것이 useRef라는 React Hook이다.
useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook로 react에서 DOM을 직접 건드리는 것(document.querySelector 등등)은 원칙적으로 금지되지만, DOM 객체 주소가 필요한 상황이 발생할 경우 useRef를 통해 접근이 가능해진다.
But 제시된 상황 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야함

DOM 객체 주소가 필요한 상황

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

ex) focus

import React, { useRef } from "react";

const Focus = () => {
  const firstRef = useRef(null);  // 기본틀, 첫번째 input의 주소값이 들어감
  const secondRef = useRef(null); // 두번째 input의 주소값이 들어감
  const thirdRef = useRef(null);  // 세번째 input의 주소값이 들어감

  const handleInput = (event) => {
    console.log(event.key, event);
    if (event.key === "Enter") {
      if (event.target === firstRef.current) {
        secondRef.current.focus();
        event.target.value = "";
      } else if (event.target === secondRef.current) {
        thirdRef.current.focus();
        event.target.value = "";
      } else if (event.target === thirdRef.current) {
        firstRef.current.focus();
        event.target.value = "";
      } else {
        return;
      }
    }
  };

  return (
    <div>
      <h1>타자연습</h1>
      <h3>각 단어를 바르게 입력하고 엔터를 누르세요.</h3>
      <div>
        <label>hello </label>
        <input ref={firstRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>world </label>
        <input ref={secondRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>codestates </label>
        <input ref={thirdRef} onKeyUp={handleInput} />
      </div>
    </div>
  );
};

export default Focus;

ex) media playback

import { useRef } from "react";

export default function App() {
  const videoRef = useRef(null);

  // 리랜더링 하지 않고 DOM주소로 직접 접근해서 조작
  const playVideo = () => {
    videoRef.current.play();  // 재생버튼
    console.log(videoRef.current);
  };

  const pauseVideo = () => {
    videoRef.current.pause();  // 정지버튼
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        <source
          type="video/mp4"
          src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
        />
      </video>
    </div>
  );
}

참고 글
https://www.daleseo.com/react-hooks-use-ref/