[React] useRef 사용법 및 예시

useRef는 왜, 언제 쓰는 훅일까?

React에서 DOM 엘리먼트의 주소값이 필요할 때 사용할 수 있다.
- focus
- text selection
- media playback
- 애니메이션 적용
- d3.js, greensock 등 DOM 기반 라이브러리 활용

useRef는 어떻게 쓰는 걸까?

1. 언제나 그렇듯 import로 불러온다.
2. 변수에 할당한다.
3. 원하는 html 태그 또는 리액트 컴포넌트에 붙여준다.

import { useRef } from 'react';
/* 1. 사용할 수 있도록 훅을 불러온다. */

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  /* 2. inputEl은 특정 엘리먼트의 주소값을 담는 변수가 된다. */
  
  const onButtonClick = () => {
    inputEl.current.focus();
    /* 4. 해당 함수가 실행되면, inputEl이 가지고 있는 주소값(input)이 focus된다. */
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
    /* 3. 특정 태그에 ref 속성을 붙이고 미리 할당했던 useRef 객체를 넣으면, 
    해당 태그의 주소값을 inputEl이라는 변수가 가지고 있게 된다. */
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

ex) 영상 플레이/정지 등을 영상 제어하고 싶을 때

import { useRef } from "react";

export default function App() {
  const videoRef = useRef(null);
  /* 1. useRef를 변수에 할당하고 */

  const playVideo = () => {
    videoRef.current.play();
    console.log(videoRef.current);
    /* 3. 버튼 클릭으로 비디오 재생을 제어하거나 */
  };

  const pauseVideo = () => {
    videoRef.current.pause();
    videoRef.current.remove();
    /* 4. 비디오 재생을 멈출 수도 있다. */
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        /* 2. 비디오 태그의 ref 속성에 해당 변수를 할당하면 */
        <source
          type="video/mp4"
          src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
        />
      </video>
    </div>
  );
}