useRef()

useRef() Hook 함수를 호출하면 ref 객체를 반환하는데, 이 객체는 current라는 속성을 가지고 있다. 이 속성에 변수를 저장하거나, DOM 요소의 주소값을 참조하게 할 수 있다.

• 반환된 ref 객체는 State(상태)처럼 컴포넌트의 전 Lifecycle에 걸쳐 유지된다.
  ( = 컴포넌트가 리렌더링되어도 값이 유지된다.)
• useRef() 함수를 호출할 때 전달 인자로 초기값을 전달할 수 있다.

import { useRef } from "react";

const ref = useRef(초기값);
console.log(ref); // { current: 초기값 }

• 초기값을 전달하지 않으면 undefined가 할당된다.

const ref = useRef();
console.log(ref); // { current: undefined }

useRef()를 사용하는 경우

1. 변수 관리

이 ref 객체의 current 속성에 값을 담을 수 있으며, 원하는 대로 값을 변경시킬 수 있다.
중요한 점은, State와 다르게 ref 객체의 current 속성값은 값이 변경되어도 컴포넌트 리렌더링이 발생하지 않는다는 것이다.

ref.current = 1;  // 컴포넌트 리렌더링 X
console.log(ref); // { current: 1 } 

따라서 값을 변경했을 때 리렌더링을 발생시키지 않아야 하는 값을 다룰 때 useRef를 사용할 수 있다.

2. DOM 조작

ref 객체에는 변수 뿐만 아니라, DOM 노드, 엘리먼트, React 컴포넌트의 주소값을 참조(reference)하게 할 수도 있다.

const ref = useRef(null);
console.log(ref);         // {current: HTMLInputElement}
console.log(ref.current); // <input type="text"></input>

return (
  <div>
    <input ref={ref} type="text" />
  </div>
);

➡️ ref 객체에 input 요소가 담긴 것을 확인할 수 있다.

이렇게 input 요소를 담고있는 ref.current에 focus()와 같은 메소드를 사용할 수도 있다.
아래의 코드는 버튼을 클릭하면 input 요소에 포커스가 이동하게 한다.

예시 1) focus

const ref = useRef(null);

const focusToInput = () => {
  ref.current.focus(); // = input.focus()
}

return (
    <div>
      <input ref={ref} type="text"/>
      <button onClick={focusToInput}>Click Me</button>
   	</div>

이 밖에도 input.value()로 input의 값을 변경할 수도 있고, 원하는 방식으로 DOM 요소를 조작할 수 있다.

⚠️ 하지만 기본 React 문법을 벗어나 useRef를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 반대되기 때문에 조심해서 사용해야 한다.

예시 2) media playback

비디오 요소를 ref 객체에 담아 play(), pause(), remove() 등의 메소드를 사용할 수도 있다.

const videoRef = useRef(null);
console.log(videoRef.current); // <video width="320" height="240" controls="">…</video>

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

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

  const removeVideo = () => {
    videoRef.current.remove();
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>재생</button>
        <button onClick={pauseVideo}>일시정지</button>
        <button onClick={removeVideo}>삭제</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        <source
          type="video/mp4"
          src="..."
        />
      </video>
    </div>