1. Ref와 DOM

Ref

• render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공
• React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있음

ref prop

• HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용
  <input ref={inputRef} />
• <input> 엘리먼트에 ref prop으로 inputRef 변수 넘김
• inputRef 객체의 current 속성으로 <input> 엘리먼트에 접근
  • DOM API를 이용하여 제어할 수 있음

Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

Ref를 남용하면 안됨

• ref는 애플리케이션에 '어떤 일이 일어나게'할 때 사용될 수도 있음
• ref의 상태를 소유해야 하는지 신중해야 함
  • 대부분 state로 저장하는것이 적절할 수 있음

2. useRef

const refContainer = useRef(initialValue)

• useRef : .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환
• 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지

사용 예

function TextInputWithFocusButton() {
  const inputEl = useRef(null); // useRef()를 통해 inputEl 생성
  const onButtonClick = () => {
    // current는 텍스트 입력 요소를 가리킴
    inputEl.current.focus(); // current를 통해 inputEl를 가리킴
  };
  return (
    <>
      <input ref={inputEl} type="text" /> // ref 값을 inputEl로 설정
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef

• .current 프로퍼티에 변경 가능한 값을 담고 있는 '상자'
  • .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지 않음
• 어떤 가변값을 유지하는 데 편리
• 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것

해당 내용은 다음 자료를 참고했습니다.
https://ko.reactjs.org/docs/hooks-reference.html#useref
https://www.daleseo.com/react-refs/