[React] useRef

• React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 함

useRef

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook

DOM 엘리먼트의 주소값을 활용해야 하는 경우 DOM 노드, 엘리먼트, React 컴포넌트 주소값을 참조할 때 사용.

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

(제시된 상황을 제외한 대부분의 경우, useRef의 사용은 React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에 주의해서 사용해야 함)

const 주소값을_담는_그릇 = useRef(참조자료형)
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
    </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>
    </>);
}

• current : Ref객체의 .current 값은 선택한 DOM을 표시
  해당 객체의 기능이나 값을 이용하는 경우 반드시 붙여주어야 함
  current의 defualt 값 : useRef 객체 선언 때 넣어두었던 argument 값

컴포넌트 별로 특정 데이터를 가지게 하고, 이러한 데이터를 리렌더링 없이 관리하고 싶을 때

import React, { useState, useRef } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef('');

  const onSet = () => {
    setName(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={onSet}>Submit</button>
    </div>
  );
}

이 경우 onChange 이벤트에 useState를 바로 사용했을 때와 달리 리렌더링이 버튼을 클릭했을 때 한 번만 일어남.