DOM 레퍼런스를 잘 활용할 수 있는 `useRef`

React 로 모든 개발 요구 사항을 충족할 수 없는데, DOM 엘리먼트의 주소값을 활용해야 하는 경우 그렇다.

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

이런 예외적인 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

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

이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다. 이 특성을 활용해 아래의 제한된 상황에서 useRef 활용할 수 있다.

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

⇒ 제시된 상황을 제외한 대부분의 경우 기분 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고,
React의 선언형 프로그래밍 원칙과 배치되기 때문에 조심해서 사용해야 한다.