[React] useRef

[Hook함수] DOM reference를 잘 활용할 수 있는 useRef

useRef는 React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야하지만 개발을 하면서 직접 조작해야할 발생할 때 사용할 수 있는 Hook함수이다. React는 아래와 같은 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조하여 활용할 수 있다. 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.
제시된 상황을 제외하고 useRef를 남용하는 것은 부적절하며 React의 선언형 프로그래밍 원칙에 배치되므로 주의해서 사용해야 한다.


DOM 옐리먼트의 주소값을 활용해야 하는 경우
▷ focus
▷ text selection
▷ media playback
▷ 애니메이션 적용
▷ d3.js, greensock 등 DOM 기반 라이브러리 활용

useRef 사용방법

const 주소값 = useRef(참조자료형)
// 이제 주소값 변수에 어떤 주소값이든 담을 수 있음
return (
    <div>
      <input ref={주소값} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을 값으로 할당하면*/}
        {/* 주소값 변수에는 input DOM 엘리먼트의 주소가 담김. */}
        {/* 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있음. */}
    </div>);

focus 예제

import React, { useRef, useEffect } from "react";

const Focus = () => {
  const firstRef = useRef(null);
  const secondRef = useRef(null);
  const thirdRef = useRef(null);

  useEffect(() => {
    firstRef.current.focus();
  }, []);

  const handleInput = (event, nextRef) => {
    if (event.key === "Enter") {
      event.preventDefault();
      if (event.target.value.trim() === "") {
        return;
      }
      nextRef.current.focus();
      event.target.value = "";
    }
  };

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

export default Focus;

media playback 예제

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    videoRef.current.play();
  }, []);

  const playVideo = () => {
    videoRef.current.play();
  };

  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>
  );
}