🔍 useRef

React에서 focus, text selection, media playback, 애니메이션 적용, jd.js 및 greensock 등 DOM 기반 라이브러리를 활용과 같이 DOM 엘리멘트의 주소값을 활용해야 하는 경우에 사용하는 hook 함수로, useRef 를 사용해 DOM 노드, element, React 컴포넌트 주소값을 참고할 수 있다. 또한 이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.

위에 명시된 예외적인 상황을 제외한 대부분의 경우, useRef를 남용하는 것은 부적절하다.

• 문법

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

• 예시

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

👀 실사용 예시

✔ focus

import React, { useRef } from "react";

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

  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>focus 예제</h1>
      <h3>각 빈칸에 단어 입력 후 enter 누를 시, focus가 다음 빈칸으로 이동한다.</h3>
      <div>
        <label>첫 번째 빈칸에 text 입력 후, enter 누를 시, 두 번째 빈칸으로 focus 이동</label>
        <input ref={firstRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>두 번째 빈칸에 text 입력 후, enter 누를 시, 세 번째 빈칸으로 focus 이동</label>
        <input ref={secondRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>세 번째 빈칸에 text 입력 후, enter 누를 시, 첫 번째 빈칸으로 focus 이동</label>
        <input ref={thirdRef} onKeyUp={handleInput} />
      </div>
    </div>
  );
};

export default Focus;

✔ media playback

import { useRef } from "react";

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

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

  const pauseVideo = () => {
    videoRef.current.pause();
  };
  
  const RemoveVideo = () => {
    videoRef.current.remove();
  }

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
		<button onClick={RemoveVideo}>Remove</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>
  );
}

Reference: 코드스테이츠