선결론

1. useRef는 가상DOM이 아닌 javascript로 만들어진 DOM을 직접 건들인다.
2. useRef는 useState와 달리 값의 변화가 있어도 리렌더링되지 않는다.
3. useRef는 리렌더링이 되어도 값이 초기화 되지 않는다.(createRef는 초기화됨)

useRef()

const ref = useRef(initialValue)

ref 는 references 의 약자로,  React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props.
useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook.

어떨때 사용하나요?

1. 자식 컴퍼넌트를 직접 접근하여 수정할 때
2. DOM 엘리먼트를 접근하고 싶을 때

이럴때 사용해보세요

Ref의 바람직한 사용 사례는 다음과 같다.

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

---

특징

useRef로 인해 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다입니다.
useRef로 부터 생성된 객체는 current 값이 변화해도 리렌더링에 관여하지 않는다

state와의 차이

• 렌더링할 때마다 재설정되는 일반 변수와 달리 리렌더링 사이에 정보를 저장할수 있다.
• 다시 렌더링을 트리거하는 상태 변수와 달리 상태 변화가 있어도 다시 렌더링을 트리거하지 않는다.

createRef와의 차이

• useRef()로 생성한 ref는 .current 프로퍼티를 통해 값의 변경을 감지할 수 있다. .current 프로퍼티를 변경하면 컴포넌트 재렌더링이 발생하지 않는다.

➕ createRef()
class형 컴포넌트로 사용
상태 변화로 인해 리렌더링이 되면 createRef의 값은 초기화가 된다.
함수형 컴포넌트의 수명 내내 ref의 current 값을 유지하기 위해 useRef hook이 만들어졌다.

callbackRef

리렌더링마다 callbackRef 내부로직이 실행되면서 height을 바꿔주기 때문에
새로운 height으로 컴포넌트를 리렌더링 시킬 수 있었다.

import React, { useState, useCallback } from "react";

export default function App() {
  const [height, setHeight] = useState(0);
  const callbackRef = (element) => {
    if (element) {
      setHeight(element.getBoundingClientRect().height);
    }
  };

  return (
    <div>
   	<input ref={callbackRef}>
    </div>
  );
}

callbackRef가 실행되어야하는지 확인하기 위해 참조 불변성을 사용한다. 즉 같은 reference를 전달하면 실행이 생략된다. 즉 useCallback으로 감싸서 전달하면 좋다.

const ref = React.useCallback((node) => {
node?.focus()
}, [])

return <input ref={ref} defaultValue="Hello world" />

참고자료

Ref와 DOM – React

useRef – React

[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef

[한 주에, 한 주제] callback Ref