useRef

• useRef
  DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 때 사용
  useRef를 통해 DOM을 직접 조작시 리렌더링이 되지 않습니다

ex) DOM 엘리먼트의 주소값을 활용하는 경우
: focus, text selection, media playback, 애니메이션 적용, d3.js, greensock 등 DOM 기반 라이브러리 활용할 때

• 작성하는 방법

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있다.
// 이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다

return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>);

• 예시

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